FileReader.readAsDataURL()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

Specification
File API # readAsDataURL

Compatibilidade

Veja também

FileReader