How to display an image from a file input? [duplicate]

Answer 1

be carrefull : reader.onloadend = function { must be reader.onloadend = function() {

but why use a fileReader ? For exemple my function to add pictures in my webSite =>

function createImageBase(src, alt) {
    var image = document.createElement('img');
    image.src = src;
    image.alt = alt;
    return image;
}


function addPicture(targetID, imageSRC){
   var location = document.getElementById(targetID);
   var image = createImageBase(imageSRC, imageSRC);
   location.appendChild(image);
}

Then just call it like that : Display

Answer 2

function myFunction() {

    var file = document.getElementById('file').files[0];
    var reader  = new FileReader();
    // it's onload event and you forgot (parameters)
    reader.onload = function(e)  {
        var image = document.createElement("img");
        // the result image data
        image.src = e.target.result;
        document.body.appendChild(image);
     }
     // you have to declare the file loading
     reader.readAsDataURL(file);
 }

http://jsfiddle.net/Bwj2D/11/ working example