2

Estou tentando fazer um preview de imagem quando o usuario selecionar o arquivo com o <input type="file" /> mas estou tendo muita dificuldade, já procurei em diversos lugares e como não manjo muito de Front fica ainda mais dificil pra mim!

Tentei fazer igual a este post mas não obtive sucesso. Alguém tem outro método?

2 Respostas 2

3

Segue o código:

  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
<input type="file" accept="image/*" onchange="loadFile(event)"/>
<img id="output"/>

Link da resposta no SOen: link

0

Para realizar essa tarefa aconselho a usar alguma API como fileinput, conforme foi citado no link que você passou acima, pois já tem o CSS implementado e já está bem estável. Mais mesmo assim segue uma solução com uso do jQuery, se quiser só com JavaScript puro avise nos comentarios:

HTML:

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

JavaScript:

function leUrl(input) {
    if (input.files && input.files[0]) { //verifica se o arquivo não está nulo
        var reader = new FileReader(); //instancia um objeto FileReader que permite aplicações web ler o conteúdo dos arquivos (ou buffers de dados puros)

        reader.onload = function (e) { //Este evento é chamado cada vez que a operação de leitura é completada com sucesso.
            $('#blah').attr('src', e.target.result); //aqui seto a imagem no src da div a cima
        }

        reader.readAsDataURL(input.files[0]); //Inicia a leitura do conteúdo que caira após o peração completar na função a cima
    }
}

$("#imgInp").change(function () { //aqui seto a função no evento de change do campo
    leUrl(this);
});

Veja funcionando aqui :)

E se quiser arriscar algo diferente, está aqui a documentação do FileReader :)

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 .