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.