O métodoreadAsDataURL é usado para ler o conteúdo do tipoBlob ouFile.Quando a operação de leitura acaba, a flagreadyState muda paraDONE e o eventoloadend é disparado.Então o atributoresult irá conter a URL codificada em base64 do arquivo.

Sintaxe

instanceOfFileReader.readAsDataURL(blob);

Parametros

blob

O conteúdo do tipoBlob ouFile 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 type="file" onchange="previewFiles()" multiple><div></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

Veja também

• FileReader