12

Descrição:


Tenho um exemplo aqui de como esta funcionando o meu sistema. Link do EXEMPLO


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

Necessidade:


Quero implementar um preview nesse código. Cada input exibir o preview do seu lado;

É possível?

3
  • Vejo que estás continuando aquele exemplo que perguntaste ontem ;) Commented 21/02/2014 às 19:07
  • 1
    Sim @PauloRoberto (Y) Commented 21/02/2014 às 19:17
  • Bom!!! Eu lhe aconselho a usar plugins, para essas situações pois os plugins ajudam a reduzir o tempo de desenvolvimento... ou seja, você terá mais tempo para focar-se na regra de negocio do seu projecto... Para o teu caso pode usar o ezdz jquery Commented 2/07/2015 às 15:34

3 Respostas 3

9

Você pode simplesmente pegar o valor do input e jogar como src de uma imagem, apenas adicione esta função ao seu exemplo:

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

Observação(mudei o HTML, adicionei um <img> de preview para cada um):

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

Mudei também o evento $('.hide').on("click"):

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

Obs: Note que agora eu coloco uma <img> para se tornar o preview de cada elemento.

Chame a função readURL() no evento .change() do seu input verificando primeiramente se não está vazio o value:

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

Exemplo no JSFiddle

Referência

Compatibilidade:

(Referência da resposta do @GuilhermeBernal) - Isso só funciona em navegadores que suportam a FileReader API (que implica em IE10+)

8
  • Isso mesmo @PauloRoberto, só que queria que cada input teria sua imagem. Entende? Commented 21/02/2014 às 19:14
  • Pronto @JeffersonAlison :) Commented 21/02/2014 às 19:21
  • Isso o que precisava! E @PauloRoberto, estou te devendo umas! hehehe Commented 21/02/2014 às 19:26
  • hahaha, pois é cara, já te salvei bastante, vou começar a cobrar ein? :p Commented 21/02/2014 às 19:27
  • 1
    Caaraleo, véi tu é o cara!! Ja estou a dias tentando fazer isso.. Tu sabe né, toda hora estou perguntando pra mim tentar fazer sozinho hehe. Obrigado pelas dicas ai e pelo codigo! Valeu mesmo brother! Commented 21/02/2014 às 20:59
8

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.

4
  • Legal, tua resposta tem mais ou menos a mesma ideia que a minha porém utiliza caminhos diferentes :D - é bom ter métodos diferentes para comparar Commented 21/02/2014 às 19:38
  • no chrome nao é mais possivel pegar o caminho da imagem do input e colocar no src="" de uma <img> porque o chrome agora mostra um "fakepath"
    – Leandro
    Commented 12/12/2016 às 10:47
  • Como reduzir a img (por exemplo para height = 50px) A sua resposta foi perfeita para meu problema. Grato
    – Geo
    Commented 27/09/2019 às 7:09
  • 1
    @Geo Onde criamos a imagem, podemos definir a largura. Troca este código $img = $('<img/>').attr('src', e.target.result); por $img = $('<img/>').attr('src', e.target.result).attr('style', 'width:50px'); e deve resolver o problema.
    – Zuul
    Commented 30/09/2019 às 9:21
5

Sabendo que isso só funciona em navegadores que suportam a FileReader API (que implica em IE10+), você pode fazer o seguinte para ler o arquivo e como um DataURI, setando o src de uma imagem.

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

Exemplo: JSFiddle.

2
  • Todo mundo respondeu no mesmo minuto, você ganhou por 40 segundos. Commented 21/02/2014 às 19:07
  • Obrigado @GuilhermeBernal Commented 21/02/2014 às 19:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .