Skip to main content
replaced http://stackoverflow.com/ with https://stackoverflow.com/
Fonte Link

Créditos da função readURL, na sua forma mais simples, para o @Ivan Baev no SOEN nesta respostanesta resposta.

Créditos da função readURL, na sua forma mais simples, para o @Ivan Baev no SOEN nesta resposta.

Créditos da função readURL, na sua forma mais simples, para o @Ivan Baev no SOEN nesta resposta.

Fonte Link
Zuul
  • 35,8mil
  • 21
  • 99
  • 190

Fazendo uso da API FileReader (Inglês), podes ler o endereço que se encontra no input do tipo file e recolher os dados binários para posteriormente injectar na página:

###Função

Na função em baixo, estamos a ler o conteúdo do input do tipo file e após sua conclusão criamos um novo elemento DOM img ao qual atribuímos os dados lidos. Por fim, anexamos o elemento à página actual, logo após o input em questão.

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]);
    }
}

###O teu caso prático

Para o teu caso prático, em adição da função em cima, é preciso uma pequena alteração ao código que tens, de forma a que o uso da API seja realizado também nos elementos que crias dinamicamente.

Onde estás a anexar o evento change:

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

Vamos alterar para uma delegação, neste caso a partir do body:

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

Garantindo assim que novos input criados pela tua função possam fazer o preview do ficheiro escolhido.


#Código Final

O código todo junto fica conforme pode ser visto em baixo e no JSFiddle:

Exemplo a funcionar no 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();
});

Créditos da função readURL, na sua forma mais simples, para o @Ivan Baev no SOEN nesta resposta.