HTML JavaScript

JavaScript: preview de imagem carregada em input file

20 de maio de 2020

JavaScript: preview de imagem carregada em input file

Neste artigo vamos aprender como fazer um preview de imagem carregada em input file, ou seja, após inserir a imagem em um formulário exibiremos ela na página.

preview de imagem form capa

Fala programador(a), beleza? Bora aprender coisa nova!

Sempre que inserimos uma imagem em um form, só é exibido o nome dela e sua extensão

O que pode gerar dúvida no usuário, se ele inseriu a imagem correta

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Por isso a ideia de fazer um preview é excelente, podemos inserir uma pré-visualização antes de enviar para o servidor

Então vamos ao código:

<!DOCTYPE html>
<html>
<head>
    <title>Preview de imagem carregada em input file</title>
</head>
<body>
    <h1>Insira a imagem</h1>
    <form>
        <div>
            <input id="img-input" type="file" name="imagem">
        </div>
        <div id="img-container">
            <img id="preview" src="">
        </div>
        <div>
            <input type="submit" value="Enviar">
        </div>
    </form>
</body>
</html>

Esse será nosso HTML base, com o formulário e o input de arquivos

Além disso criamos uma div com o id de img-container, que contem uma imagem sem src

Com JavaScript vamos preencher esse src, com o da imagem enviada, fazendo assim o preview

Veja o código JS:

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("img-input").addEventListener("change", readImage, false);

O que acontece aqui é: temos um mapeamento de evento change, no input de arquivos

Ao ocorrer uma mudança (enviar imagem), a função readImage é acionada

Esta função tem como principal objetivo ler o arquivo enviado e mudar o atributo de preview para o src da imagem

Fazendo com que a imagem seja exibida na div abaixo do input

E assim conseguimos mostrar o preview de imagem carregada em input file

Exemplo do resultado atingido:

ex preview de imagem input file

Conclusão

Neste artigo vimos como exibir o preview de imagem adicionada ao formulário

Utilizamos JavaScript para manipular o src de imagem previamente inserida no código HTML

Para que quando o arquivo for enviado, ela exiba a imagem que enviamos

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Subscribe
Notify of
guest
4 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Adrian Cavalcante Santos

Isso funciona com duas inputs do tipo file na mesma pagina? tipo, eu tenho uma input do tipo file que é pra o usuario enviar a imagem de fundo, e a outra input é pra enviar a imagem de perfil.

Battisti

Sim, mas você vai precisar fazer as tratativas para ambas, pegando a sua fonte e tudo mais…

Natanael

Ajudou demais, obrigado!!

Battisti

de nada Natanael!

4
0
Would love your thoughts, please comment.x