📷 Upload de Arquivo com Visualização de Imagem

👇 Exemplo de visualização 👇

👀 Demonstração

Pré-visualização da imagem 

<form action="upload.php" method="post" enctype="multipart/form-data" onsubmit="event.preventDefault()">
  <p>Selecione uma imagem:</p>
  <input type="file" accept="image/*" onchange="previewImage(event)">
  <div style="margin-top: 1em;">
    <img id="imagePreview" src="#" alt="Pré-visualização da imagem" style="display:none; max-width:100%;">
  </div>
  <button type="submit" style="margin-top: 1em;">📤 Enviar</button>
</form>

<script>
function previewImage(event) {
  const img = document.getElementById("imagePreview");
  img.src = URL.createObjectURL(event.target.files[0]);
  img.style.display = "block";
}
</script>

📌 Significado e uso dos atributos do formulário

① action="upload.php"
Define a URL de destino para onde os dados do formulário serão enviados quando o formulário for submetido.

<form action="upload.php" ...>

Observação: Você pode criar um arquivo upload.php para salvar imagens no servidor ou usar uma URL de serviço externo.

② enctype="multipart/form-data"
Define o tipo de codificação necessário para enviar arquivos de imagem ou outros dados binários por meio do formulário.

<form enctype="multipart/form-data" ...>

③ onsubmit="event.preventDefault()"
Impede que o formulário seja realmente enviado ao servidor.

<form onsubmit="event.preventDefault()" ...>

🧪 Exemplo completo (com todos os atributos)

<form action="upload.php" method="post" enctype="multipart/form-data" onsubmit="event.preventDefault()">

✅ Usos e Vantagens deste Modelo

  • Visualização imediata ao selecionar a imagem
  • Proporciona uma experiência intuitiva ao usuário
  • Fácil de integrar em interfaces de upload
  • Útil para portfólios ou cadastro de produtos
  • Estrutura simples para iniciantes em JS

🧩 Aplicações e formas de uso

A função de pré-visualização de imagem é uma melhoria comum em sites de comércio eletrônico e páginas de cadastro de perfil, ajudando a melhorar a experiência do usuário. Exibir imediatamente a imagem selecionada também ajuda a evitar erros de envio de arquivos.

Este template utiliza URL.createObjectURL() para gerar uma URL temporária a partir do arquivo de imagem selecionado. Isso permite que os usuários vejam a prévia da imagem instantaneamente, sem a necessidade de fazer upload para o servidor.

Além disso, usa-se img.style.display = "block" para controlar a visibilidade, exibindo a imagem apenas após a seleção.

Se quiser adicionar validações, como tamanho máximo ou tipo de arquivo, pode usar event.target.files[0].type e .size para criar lógica personalizada.

Aprender essa base facilita a implementação de funções mais avançadas no futuro, como pré-visualização múltipla ou envio com arrastar-e-soltar.