Exibir miniatura de imagem enviada em formulário

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