FileReader.readAsDataURL()

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

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

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

IE9 possui uma File API Lab.
Opera possui suporte parcial na versão 11.1.

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

FileReader