Javascript: show selected image

Question

I was trying to make it so when you select your image it will show it directly. Ofcourse you do this in a onchange thing in html. This is what i have by now:

function showImage(src, target) {
    var fr = new FileReader();

    fr.onload = function (e) { target.src = this.result; };

    src.addEventListener("change", function () {

        fr.readAsDataURL(src.files[0]);
    });

}
function putImage() {
    var src = document.getElementById("select_image");
    var target = document.getElementById("target");
    showImage(src, target);
}

<img id="target" />
<input type="file" id="select_image" name="image" onchange="putImage()"> </input>

This works not for me in a weird way. Because the onchange works. I can test that by alerting something on the event. That works great. The javascript works too in a jsfiddle.. But these things combined not. I hope someone can help

The image hasn't been uploaded yet...how would it be able to show the image? — Spencer May, Dec 09 '14 at 20:11
@SpencerMay Using the File API. It's something JavaScript gurus love to demo. — Katana314, Dec 09 '14 at 20:13

score 11 · Accepted Answer · answered Dec 09 '14 at 20:13

You don't need the change event inside the showImage function. You already call the putImage method with the onechange event handler inside the html, and that method contains the call of showImage:

function showImage(src, target) {
    var fr = new FileReader();
    fr.onload = function(){
        target.src = fr.result;
    }
    fr.readAsDataURL(src.files[0]);
}

function putImage() {
    var src = document.getElementById("select_image");
    var target = document.getElementById("target");
    showImage(src, target);
}

fiddle is here.

Javascript: show selected image

1 Answers1