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.

We'd love to hear more about your role and the company you work for

Please help us by answering a few questions.

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