always searches the input file in the path of the HTML file itself

Question

Let's say I have a HTML file named site.html. The full path name of this file is C:\Users\Anton\Documents\Projects\site.html.

This html file is a simple program to open and show images. I use <input type='file'>, so that the user may select the image he wants to view:

<input type='file></input>

-> user selects an image, information about the image is displayed at the top of the page, e.g.:
   name: marker.png   type: image/png   size: 20921 Bytes

I access these information with fileInput.files[0].name, fileInput.files[0].type .. and so on.

Until here it works perfectly fine.

But then it comes to displaying the image. To do this I used <object width="400" height="400" id='obj' data=""></object>

I added some JavaScript:

function showPic() {
    ...
    document.getElementById('obj').data = fileInput.files[0].name;
}

fileInput.oninput = showPic;

Then it actually had to work, but the image just didn't display. Chrome and some other Browsers threw a net::ERR_FILE_NOT_FOUND.

After I tried to open the image via Ctrl + Mouse-Click in the browser console I realised that the file of the image input has to be in the same path the actual HTML file is. Otherwise, the image is searched in C:\Users\Anton\Documents\Projects and if the file isn't there, net::ERR_FILE_NOT_FOUND is thrown.

My question: How can I show a file that's not in the same path as the HTML file? I would need the full image path to solve that, but apparently, security browsers like Chrome or MS Edge don't allow that. So is there another way to fix this problem? Thanks in advance.

I understand you're opening the html directly, is that correct? You will need a server where to upload the image, and serve them from there — Gonzalo.-, Dec 17 '19 at 02:25
@Gonzalo.- Yes I open the HTML file directly. Could you explain me how to do that? ( So how to use this server, will I need to buy it, etc...) — T. Feix, Dec 17 '19 at 02:26
You download free software that you can run on your computer for testing, like Wamp, EasyPHP etc. — adeneo, Dec 17 '19 at 02:42
Your HTML is invalid. The `` tag does not have a closing tag. — Rob, Dec 17 '19 at 02:53

StackSlave · Accepted Answer · 2019-12-17T03:39:39.880

You might want to do something like:

//<![CDATA[
/* js/external.js */
var doc, html, bod, nav, mobile, M, I, S, Q, aC, rC; // for use on other loads
addEventListener('load', function(){
doc = document; html = doc.documentElement; bod = doc.body;  nav = navigator;
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
M = function(tag){
  return doc.createElement(tag);
}
I = function(id){
  return doc.getElementById(id);
}
S = function(selector, within){
  var w = within || doc;
  return w.querySelector(selector);
}
Q = function(selector, within){
  var w = within || doc;
  return w.querySelectorAll(selector);
}
aC = function(element, className, yFunc){
  var s = element.className.split(/\s+/), n = s.indexOf(className);
  if(n === -1){
    s.push(className); element.className = s.join(' ').trim();
    if(yFunc)yFunc(element);
  }
  return function(className, yFunc){
    return aC(element, className, yFunc);
  }
}
rC = function(element, className, yFunc){
  var s = element.className.split(/\s+/), n = s.indexOf(className);
  if(n !== -1){
    s.splice(n, 1); element.className = s.join(' ').trim();
    if(yFunc)yFunc(element);
  }
  return function(className, yFunc){
    return rC(element, className, yFunc);
  }
}
// above is a mini-library - below could be on another page if you want - except the load end
var out = I('output');
I('upload').onchange = function(){
  if(this.files.length){
    var file = this.files[0], img; // first file
    if(this.value.match(/\.(png|jpe?g|gif)$/i)){ // file.type is unreliable
      out.innerHTML = ''; rC(out, 'error'); img = M('img');
      img.src = URL.createObjectURL(file); out.appendChild(img);
    }
    else{
      aC(out, 'error'); out.innerHTML = 'Must Be An Image';
    }
  }
}
}); // end load
//]]>

/* css/external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%;
}
body{
  background:#ccc;
}
.main{
  padding:5px 7px;
}
.error{
  color:#900;
}
.hide{
  display:none;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div class='main'>
    <input id='upload' type='file' />
    <div id='output'></div>
  </div>
</body>
</html>

Note: the ``, `` and `` tags do not use and do not need a closing slash and never have in HTML. If you are claiming this is XHTML then it's not helpful because the question states it is HTML. — Rob, Dec 17 '19 at 02:56
It's easier to read and more transportable, `@Rob`. I have no idea how OP is Serving this. Bottom line... it doesn't create a problem, yet you continue to make issue of it. Do you not remember when you complained about it last time? XHTML coding standards satisfy HTML as well, but not the other way around. — StackSlave, Dec 17 '19 at 03:07
`@Rob`, it validated [here](https://validator.w3.org/#validate_by_input). Test it yourself. — StackSlave, Dec 17 '19 at 03:45

always searches the input file in the path of the HTML file itself

1 Answers1