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>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
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 473 aulas
- 20 projetos
- 39h 26min
Blog | Mais populares
As diferenças de var, let e const
Como fazer redirecionamento com PHP
Neste artigo você vai aprender a como fazer redirecionamento com PHP, utilizaremos abordagens fáceis de entender e de aplicar Fala programador(a), beleza? Bora aprender mais […]
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação A popularidade da automação de processos com o n8n está em alta, principalmente […]
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?