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

Inscrever-se
Notificar de
guest

6 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários
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!

Edilson Santiago

Muito bom. Prático e funcional. Apenas uma dúvida: eu tenho um formulário que, ao ser aberto, o src já está preenchido com uma url pelo banco de dados. Então essa imagem já aparece na div. Queria saber como faço para esse preview substituir a imagem que já está aparecendo, pela que foi selecionada do input file.

AUGUSTO

Olá,
Estou querendo usar os eventos “onMouseover” e “onMouseout” para mostrar uma IMAGEM quando o usuário passar o mouse sobre uma TAG <input type=”radio” …>
Como seria o código JS para isso?

Última edição 1 ano atrás por AUGUSTO