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.

Nota: Oresult da Blob não pode ser diretamente descodificado como Base64 sem remover a declaração Data-URL que precede os dados em Base64. Para ter só a string em Base64, primeiro tem de remover o data:*/*;base64, do resultado.

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

}
Nota: O construtor FileReader() não é apoiado pela Internet Explorer anterior à versão 10. Para obter código totalmente compatível veja a nossa solução crossbrowser para pré-visualizar imagens. Veja também este exemplo mais complexo.

Especificações

Especificação Estado Comentário
File API
The definition of 'readAsDataURL()' in that specification.
Working Draft Definição inicial

Compatibilidade

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
readAsDataURLChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 32
Notes
Full support 32
Notes
Notes Using the camera in Android 8.x raises an exception. See bug 1511083.
Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

Ver também