FileReader.readAsDataURL()

O método readAsDataURL é utilizado para ler os conteúdos dum Blob ou File especificado. Quando a operação de leitura é terminada, a propriedade readyState é atualizada para DONE, e o evento loadend é lançado. Nessa altura, o atributo result contem os dados na forma data: URL que representa os dados do ficheiro em base 64 numa string.

Sintaxe

instanceOfFileReader.readAsDataURL(blob);

Parametros

blob

O Blob ou File para ler.

Exemplo

HTML

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

JavaScript

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

  reader.addEventListener("load", function () {
    // converter o file de imagem oara uma string de base 64
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

Resultado

Exemplo de vários files

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);
  }

}

Especificações

Compatibilidade

Ver também

• FileReader
• URL.createObjectURL()