Tradução em progresso.

O método readAsDataURL é usado para ler o conteúdo do tipo Blob ou File.
Quando a operação de leitura acaba, a flag readyState muda para DONE e o evento loadend é disparado.
Então o atributo result irá conter a URL codificada em base64 do arquivo.

Sintaxe

instanceOfFileReader.readAsDataURL(blob);

Parametros

blob
O conteúdo do tipo Blob ou File que queremos ler.

Exemplo

HTML

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Prévia da imagem...">

JavaScript

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

Demo

Exemplo de leitura com múltiplos arquivos

HTML

<input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div>

JavaScript

function previewFiles() {

  var preview = document.querySelector('#preview');
  var files   = document.querySelector('input[type=file]').files;

  function readAndPreview(file) {

    // Make sure `file.name` matches our extensions criteria
    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
      var reader = new FileReader();

      reader.addEventListener("load", function () {
        var image = new Image();
        image.height = 100;
        image.title = file.name;
        image.src = this.result;
        preview.appendChild( image );
      }, false);

      reader.readAsDataURL(file);
    }

  }

  if (files) {
    [].forEach.call(files, readAndPreview);
  }

}
Nota: O construtor do FileReader() não é suportado  por versões anteriores à 10 do Internet Explorer. Para uma maior compatibilidade você pode ver os exemplos prévia de imagem básica ou prévia de imagem avançada.

Especificações

Compatibilidade

Feature Firefox (Gecko) Chrome Internet Explorer* Opera* Safari
Basic support 3.6 (1.9.2) 7 10 12.02 6.0.2
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support 32 3 10 11.5 6.1

Notas de implementações

Notas específicas para Gecko

  • Em versões anteriores ao Gecko 2.0 beta 7 (Firefox 4.0 beta 7), todos os parâmetros Blob abaixo eram parâmetros File. Isto foi então atualizado para adequarem-se corretamente às especificações.
  • Em versões anteriores ao Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10), a propriedade FileReader.error retornava um objeto FileError. Esta interface foi removida e a propriedade FileReader.error agora retorna o objeto DOMError, assim como está definido na última versão da FileAPI.

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: W3SS, DiegoYungh
 Última atualização por: W3SS,