MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

FileReader.readAsDataURL()

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

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

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

Compatibilidade

Feature Firefox (Gecko) Chrome Internet Explorer* Opera* Safari
Basic support 3.6 (1.9.2) 7 10 12.02 6.0.2
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support 32 3 10 11.5 6.1

Notas de implementações

Notas específicas para Gecko

  • Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all Blob parameters below were File parameters; this has since been updated to match the specification correctly.
  • Prior to Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) the FileReader.error property returned a FileError object. This interface has been removed and FileReader.error is now returning the DOMError object as defined in the latest FileAPI draft.

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: DiegoYungh
 Última atualização por: DiegoYungh,