06.02.2025

Pré-visualização Instantânea da Imagem Selecionada em HTML Sem Enviar

Resumindo

Para exibir instantaneamente uma imagem após a seleção, você precisa usar uma combinação de HTML e JavaScript. Você precisará de um elemento input para seleção de arquivos e de um elemento img para exibir a imagem. Utilize a API FileReader, que converte o arquivo em um formato DataURL, e depois atualize o atributo src da tag de imagem. Aqui está um exemplo de código:

<input type="file" onchange="document.getElementById('output').src = URL.createObjectURL(this.files[0])">
<img id="output">

O evento onchange dispara a pré-visualização criando uma URL temporária que o elemento img usa como valor para seu atributo src. Esse método é rápido, simples e não requer configuração adicional com o FileReader.

Degradação Elegante: Suporte a Navegadores Antigos

Se você ainda está usando versões mais antigas de navegadores onde URL.createObjectURL não está disponível, você pode utilizar o FileReader como alternativa. O código será um pouco mais longo, mas continuará estável:

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#imagePreview').attr('src', e.target.result);
    };
    reader.readAsDataURL(input.files[0]);
  }
}

$("#fileInput").change(function() {
  readURL(this);
});

E o HTML correspondente:

<input type="file" id="fileInput">
<img id="imagePreview" src="#" alt="Sua imagem" />

Melhorando a Experiência do Usuário com Bibliotecas

Para melhorar a interatividade, é recomendado usar bibliotecas como jQuery-File-Upload ou JavaScript-Load-Image, que oferecem recursos adicionais de edição de imagem, como redimensionamento ou corte.

Restringindo Envio Apenas para Imagens

Para limitar os envios apenas a imagens, utilize o atributo accept:

<input type="file" accept="image/gif, image/jpeg, image/png" onchange="readURL(this)">

Essa abordagem protege o servidor de arquivos incompatíveis.

Visualização

Pense no processo de seleção de imagem como um ato mágico. Primeiro, você prepara o "palco":

<input type='file' onchange='showImage(this)'>

Então, você lança seu "feitiço":

function showImage(input) {
  var reader = new FileReader();
  reader.onload = function(e) {
    document.getElementById('image').src = e.target.result;
  };
  reader.readAsDataURL(input.files[0]);
}

E... Abracadabra! A imagem selecionada aparece na tela:

<img id='image' style='display: none;'>

Várias Pré-visualizações e Implementação de Miniaturas

Para expandir suas habilidades mágicas, configure uma galeria de miniaturas usando HTML5:

function updateImageDisplay() {
  var gallery = document.getElementById('gallery');
  gallery.innerHTML = "";

  var curFiles = input.files;
  if(curFiles.length === 0) {
    var para = document.createElement('p');
    para.textContent = 'Nenhum arquivo selecionado';
    gallery.appendChild(para);
  } else {
    var list = document.createElement('ol');
    gallery.appendChild(list);

    for(var i = 0; i < curFiles.length; i++) {
      var listItem = document.createElement('li');
      var para = document.createElement('p');
      if(validFileType(curFiles[i])) {
        para.textContent = 'Arquivo: ' + curFiles[i].name + ', tamanho: ' + returnFileSize(curFiles[i].size) + '.';
        var image = document.createElement('img');
        image.src = window.URL.createObjectURL(curFiles[i]);

        listItem.appendChild(image);
        listItem.appendChild(para);
      } else {
        para.textContent = 'Arquivo ' + curFiles[i].name + ' não é adequado. Por favor, escolha outro.';
        listItem.appendChild(para);
      }
      list.appendChild(listItem);
    }
  }
}

Esse tipo de feedback visual torna a interface do usuário mais amigável e envolvente.

Tratamento de Erros

O tratamento de erros pode ser feito usando o evento onerror do objeto FileReader:

reader.onerror = function(event) {
  console.error("Erro ao ler o arquivo. Código de erro: " + event.target.error.code);
};

Certifique-se de notificar o usuário sobre o problema, fornecendo informações sobre um arquivo incompatível ou erro de acesso.

Recursos Úteis

1. Usando Arquivos em Aplicações Web - Web API | MDN — um guia detalhado sobre o trabalho com arquivos em aplicações web.
2. <input type="file"> - HTML: Linguagem de Marcação de Hipertexto | MDN — um guia sobre o elemento <input type="file">.
3. javascript - Pré-visualizar uma imagem antes de enviar - Stack Overflow — exemplos de pré-visualizações de imagens.
4. Um Guia Completo para Atributos de Dados | CSS-Tricks — um artigo sobre atributos de dados em HTML.
5. Padrão do HTML — um padrão que descreve todos os elementos HTML e suas APIs.
6. Padrão do HTML - Elemento <img> para Embutir Imagens — especificações para o elemento <img>.
7. GitHub - blueimp/JavaScript-Load-Image — um conjunto de funções JavaScript para trabalhar com imagens em formato de Arquivo ou Blob.

Video

Navigation