How to display an image from a file input?

Question

I would like to choose a file and display the image on the browser. I tried inserting the direct image path and it worked.

The problem now is, how can I display the image from the <input type=file> ?

Here is what my code looks like:

function myFunction() {
    var file = document.getElementById('file').files[0];
    var reader = new FileReader();

    reader.onloadend = function {
        var image = document.createElement("img");
        image.src = "reader"
        image.height = 200;
        image.width = 200;

        document.body.appendChild(image);
    }
}

<input type=file name=filename id=file>
<button type=button onclick='myFunction()'>Display</button>

You created the `FileReader()`, but how will it know what file to read? — Ja͢ck, Mar 07 '14 at 08:33
image width and height are (BTW) read-only. You can use `var image = new Image(w, h);` instead. — , Mar 07 '14 at 08:47

Nephelococcygia · Accepted Answer · 2014-03-07T09:01:25.543

31

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

edited Mar 07 '14 at 09:01

answered Mar 07 '14 at 08:56

Nephelococcygia

726
5
11

Do I need some ``? or something? – user3335903 Mar 07 '14 at 08:57
simple and easy. thanks – pixparker May 26 '18 at 13:11

score -3 · Answer 2 · answered Mar 07 '14 at 08:43

-3

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

answered Mar 07 '14 at 08:43

daarksim

241
1
10

Do you have any working sample for it? I tried to use it but it didn't work. – user3335903 Mar 07 '14 at 08:50
I use it for my application who is here : http://test.projet1.worldheberg.com/local/fr-appli-test.html (all the image are not in the server that's why you can show few missing images) Can you publish your link ? – daarksim Mar 07 '14 at 08:54
Where do u get the imgSRC if the file is on client's machine. This basically adds an img element to the DOM (pretty straight forward). The question is how to display an image from a file input, – Amiratak88 Jun 08 '19 at 23:38

How to display an image from a file input?

2 Answers2

Linked