How to preview a loaded image in an "file" input?

Question

Description:

---

I have an example here of how my system is working. EXAMPLE LINK

---

HTML

<input type=file>
<input type=button class=hide value="Adicionar outro">

---

JAVASCRIPT

function verificaMostraBotao(){
    $('input[type=file]').each(function(index){
        if ($('input[type=file]').eq(index).val() != ""){
            $('.hide').show();
        }
    });
}

$('input[type=file]').on("change", function(){
  verificaMostraBotao();
});

$('.hide').on("click", function(){
    $(document.body).append($('<input />', {type: "file" }).change(verificaMostraBotao));
    $('.hide').hide();
});

---

CSS

input[type=file] {
    float: left;
    display: block;
}
.hide {
    display: none;
    float: left;
}

---

Need:

---

I want to implement a preview in that code. Each input display the preview on your side;

It is possible?

Answer 1

You can simply take the input value and play as src of an image, just add this function to your example:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
        $(input).next()
        .attr('src', e.target.result)
    };
    reader.readAsDataURL(input.files[0]);
    }
    else {
        var img = input.value;
        $(input).next().attr('src',img);
    }
}

Note(I changed the HTML, added a <img> preview for each one):

<input type=file>
<img />
<input type=button class=hide value="Adicionar outro">

I also changed the event $('.hide').on("click"):

$('.hide').on("click", function(){
    $(document.body).append($('<input />', {type: "file" }).change(verificaMostraBotao));
    $(document.body).append($('<img />'));
    $('.hide').hide();
});

Obs: Note that now I put one <img> to become the preview of each element.

Call the function readURL() at the event .change() of your input by checking first whether value is not empty:

function verificaMostraBotao(){
    $('input[type=file]').each(function(index){
        if ($('input[type=file]').eq(index).val() != ""){
            readURL(this);
            $('.hide').show();
        }
    });
}

Example in Jsfiddle

Reference

Compatibility:

(Reference of @Guilhermebernal’s reply) - This only works in browsers that support the Filereader API (which implies IE10+)

Answer 2

Making use of the API Filereader ^(English), you can read the address on input of the kind file and collect the binary data and then inject it into the page:

Function

In the function below, we are reading the content of input of the kind file and after its completion we create a new DOM element img to which we assign the data read. Finally, we attach the element to the current page, right after the input in question.

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $img = $('<img/>').attr('src', e.target.result);
            $(input).after($img);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

Your practical case

For your practical case, in addition to the function above, you need a small change to the code you have, so that the use of the API is also carried out on the elements you create dynamically.

Where are you attaching the event change:

$('input[type=file]').on("change", function(){
    verificaMostraBotao();
});

We will change to a delegation, in this case from the body:

$('body').on("change", "input[type=file]", function(){
    verificaMostraBotao();
    readURL(this);
});

Thus ensuring that new input created by your function can preview the chosen file.

---

Final Code

All the code together is as seen below and in Jsfiddle:

Example working on Jsfiddle

HTML

<input type="file">
<input type="button" class="hide" value="Adicionar outro">

jQuery

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $img = $('<img/>').attr('src', e.target.result);
            $(input).after($img);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

function verificaMostraBotao() {
    $('input[type=file]').each(function(index){
        if ($('input[type=file]').eq(index).val() != "")
            $('.hide').show();
    });
}

$('body').on("change", "input[type=file]", function() {
    verificaMostraBotao();
    readURL(this);
});

$('.hide').on("click", function() {
    $(document.body).append($('<input />', {type: "file" }).change(verificaMostraBotao));
    $('.hide').hide();
});

---

^{Function credits readURL, in its simplest form, for @Ivan Baev on SOEN in this answer.}

Answer 3

Knowing this only works on browsers that support the Filereader API (which implies IE10+), you can do the following to read the file and as a Datauri by setting the src image.

function readImage() {
    if (this.files && this.files[0]) {
        var file = new FileReader();
        file.onload = function(e) {
            document.getElementById("preview").src = e.target.result;
        };       
        file.readAsDataURL(this.files[0]);
    }
}

document.getElementById("imgChooser").addEventListener("change", readImage, false);

Example: Jsfiddle.