2

Colegas.

Não sei se meu título foi claro, mas estou com dificuldades em arrumar um modo do usuário ao selecionar a foto pelo campo de upload, a mesma aparecer embaixo do campo de upload ao ser selecionada, mas sem enviar para o servidor, pois esse campo ficará logo no início do formulário de cadastro.

Vi vários exemplos que fazem quase isso, mas que para aparecer, primeiro eles mandam para o servidor com o PHP e não é isso que quero. Tem como fazer isso?

1
  • 2
    Sim, é totalmente posível. Por favor veja este exemplo: jsfiddle.net/LvsYc. Infelizmente, estou sem tempo para escrever uma resposta.
    – Olimon F.
    Commented 17/07/2017 às 16:01

1 Resposta 1

4

Achei o problema interessante e encontrei uma solução no Stack Overflow em inglês. Vou roubartilhar e traduzir a resposta marcada como correta em:

Preview an image before it is uploaded

Você precisa de algum HTML mais ou menos assim:

<form id="form1">
    <input type="file" id="fileUpload" />
    <img id="imagem" src="#" alt="Preview da sua imagem" />
</form>

E agora um pouco de Javascript. Vou supor que você usa jQuery. Mesmo que não utilize, seu código não vai ficar muito diferente disso:

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

        reader.onload = function (e) {
            $("#imagem").attr('src', e.target.result);
        }     
        reader.readAsDataURL(input.files[0]);
    }
}

$("#fileUpload").change(function(){
    readURL(this);
});

Segue um exemplo do código da resposta original em inglês, rodando no JSFiddle: http://jsfiddle.net/LvsYc/

1
  • Obrigado a todos!
    – user24136
    Commented 17/07/2017 às 17:28

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