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.
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>
Formação Claude Code
Domine Claude Code do absoluto zero até o avançado
- 114 aulas
- 4 projetos
- 9h 18min
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:
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
Um detalhe que ajuda MUITO o usuário: limitar o input pra aceitar só imagem
Assim ele nem consegue escolher um PDF ou um zip sem querer
Basta adicionar o atributo accept no input de arquivo:
<input id="img-input" type="file" name="imagem" accept="image/*">
O image/* diz pro navegador filtrar e mostrar só arquivos de imagem na hora de selecionar
Simples e evita dor de cabeça
E se o usuário trocar de ideia e quiser tirar a imagem?
Dá pra limpar o preview zerando o src da imagem
Você pode ligar isso a um botão, por exemplo:
function limparPreview() { document.getElementById("preview").src = ""; document.getElementById("img-input").value = ""; }
Aqui a gente esvazia o src do preview e ainda reseta o value do input
Resetar o input é importante, senão o navegador ainda entende que tem um arquivo selecionado ali
Por que a imagem não aparece no preview?
Geralmente é porque o id do input ou da imagem no JavaScript não bate com o do HTML
Confere se o img-input e o preview estão escritos igualzinho nos dois lugares
Dá pra fazer preview de mais de uma imagem?
Dá sim, você adiciona o atributo multiple no input e percorre o this.files com um laço, criando um preview pra cada arquivo
O FileReader funciona em todos os navegadores?
O FileReader é bem antigo e tem suporte amplo nos navegadores modernos, então pode usar tranquilo
Leia também
Matheus Battisti
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
Blog | Mais populares
As diferenças de var, let e const
Como redirecionar para outra página com JavaScript
Exercícios de lógica de programação JavaScript com gabarito
Quais são os melhores exercícios lógica de programação JavaScript? Colocar em prática os exercícios de lógica de programação em JavaScript é de extrema importância para […]
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.
Sim, mas você vai precisar fazer as tratativas para ambas, pegando a sua fonte e tudo mais…
Ajudou demais, obrigado!!
de nada Natanael!
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.
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?