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 Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
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
Formações
Formação SAAS com IA
Tire usas ideias do papel criando softwares com IA, integre pagamentos e lance seu projeto!
- 291 aulas
- 18 projetos
- 24h 17min
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 […]
ChatGPT: o que é, como usar, dicas e como acessar login
ChatGPT é uma ferramenta de processamento de linguagem natural (NLP) baseada na arquitetura GPT-3.5, desenvolvida pela OpenAI. Sua criação representa um marco significativo no campo […]
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?