Neste artigo você vai aprender a como exibir miniatura de imagem enviada em formulário, para que o usuário veja um preview da imagem inserida
Conteúdo também disponível em vídeo:
Fala programador(a), beleza? Bora aprender mais sobre JavaScript e também upload de imagens!
E você deve estar se perguntando, por que JavaScript? Qual a sua relação com a imagem enviada?
Vamos fazer a exibição via evento de JavaScript, desta forma podemos mostrar ao usuário qual imagem ele está enviando para o servidor sem que a página recarregue
Para isso vamos precisar de uma estrutura considerável, veja o HTML:
<form action="">
<input type="file" id="image" name="image">
<div>
<input type="submit" value="Enviar">
</div>
</form>
<img src="" alt="" id="preview-image">
Aqui criamos um pequeno formulário apenas com os campos necessários para o exemplo
O seu pode ser maior, não terá influência no restante do código
Por fim adicionamos um elemento de imagem sem src, que é onde a nossa miniatura será encaixada após o evento de inserção no formulário
Agora vamos ao código JavaScript necessário:
const input = document.querySelector('#image');
input.addEventListener('change', function(e) {
const tgt = e.target || window.event.srcElement;
const files = tgt.files;
const fr = new FileReader();
fr.onload = function () {
document.querySelector('#preview-image').src = fr.result;
}
fr.readAsDataURL(files[0]);
});
Aqui temos bastante coisa acontecendo ao mesmo tempo
Primeiramente inserimos o input de imagem em uma variável, o que torna possível criar um evento no elemento
E então adicionamos um evento change, que é ativado quando o usuário insere uma imagem no input
No evento encapsulamos os arquivos na variável files, e também inicializamos FileReader, uma biblioteca do próprio JavaScript para tratar arquivos
Por fim, substituímos o src da nossa tag de img, que até então está vazio, por o resultado da imagem enviada
Exibindo assim o preview da imagem no nosso HTML, sendo possível o visitante do nosso site checar qual imagem está enviando no formulário
Conclusão
Neste artigo aprendemos a como exibir miniatura de imagem enviada em formulário
Utilizamos um evento no input do formulário, para poder saber a hora que o usuário está enviando a imagem
Depois no evento lemos a imagem através do FileReader, e exibimos na nossa tag de imagem no HTML base
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube