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
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?