Loading an image to a <img> from <input file>

Question

I'm trying to load an image selected by the user through an element.

I added a onchange event handler to the input element like this:

<input type="file" name="picField" id="picField" size="24" onchange="preview_2(this);" alt=""/> 

and the preview_2 function is:

var outImage ="imagenFondo"; function preview_2(what){     globalPic = new Image();     globalPic.onload = function() {         document.getElementById(outImage).src = globalPic.src;     }     globalPic.src=what.value; } 

where outImage has the id value of the tag where I want the new picture to be loaded.

However, it appears that the onload never happens and it does not load anything to the html.

What should I do?

Answer 1

In browsers supporting the File API, you can use the FileReader constructor to read files once they have been selected by the user.

Example

document.getElementById('picField').onchange = function (evt) {     var tgt = evt.target || window.event.srcElement,         files = tgt.files;      // FileReader support     if (FileReader && files && files.length) {         var fr = new FileReader();         fr.onload = function () {             document.getElementById(outImage).src = fr.result;         }         fr.readAsDataURL(files[0]);     }      // Not supported     else {         // fallback -- perhaps submit the input to an iframe and temporarily store         // them on the server until the user's session ends.     } } 

Browser support

• IE 10
• Safari 6.0.2
• Chrome 7
• Firefox 3.6
• Opera 12.02

Where the File API is unsupported, you cannot (in most security conscious browsers) get the full path of a file from a file input box, nor can you access the data. The only viable solution would be to submit the form to a hidden iframe and have the file pre-uploaded to the server. Then, when that request completes you could set the src of the image to the location of the uploaded file.

Answer 2

As iEamin said in his answer, HTML 5 does now support this. The link he gave, http://www.html5rocks.com/en/tutorials/file/dndfiles/ , is excellent. Here is a minimal sample based on the samples at that site, but see that site for more thorough examples.

Add an onchange event listener to your HTML:

<input type="file" onchange="onFileSelected(event)"> 

Make an image tag with an id (I'm specifying height=200 to make sure the image isn't too huge onscreen):

<img id="myimage" height="200"> 

Here is the JavaScript of the onchange event listener. It takes the File object that was passed as event.target.files[0], constructs a FileReader to read its contents, and sets up a new event listener to assign the resulting data: URL to the img tag:

function onFileSelected(event) {   var selectedFile = event.target.files[0];   var reader = new FileReader();    var imgtag = document.getElementById("myimage");   imgtag.title = selectedFile.name;    reader.onload = function(event) {     imgtag.src = event.target.result;   };    reader.readAsDataURL(selectedFile); }