FileReader.readAsDataURL()

El método readAsDataURL es usado para leer el contenido del especificado Blob o File. Cuando la operación de lectura es terminada, el readyState se convierte en DONE, y el loadend es lanzado. En ese momento, el atributo result contiene la información como una URL representando la información del archivo como una cadena de caracteres codificados en base64.

Sintaxis

instanceOfFileReader.readAsDataURL(blob);

Parametros

blob: El Blob o File desde el cual leer.

Ejemplo

HTML

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

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 = "";
  }
}

Resultado en vivo

Nota: el constructor FileReader() no es soportado por Internet Explorer version anterior a la 10. Para una completa compatibilidad de codigo puedes ver nuestra Posibler solución de compatibilidad para vista previa de imagenes entre navegadores. Ve también este ejemplo más poderoso.

Especificaciones

Specification	Status	Comment
File API The definition of 'FileReader' in that specification.	Working Draft	Initial definition

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	3.6 (1.9.2)^[1]	7	10^[2]	12.02^[3]	6.0.2

Feature	Firefox Mobile (Gecko)	Android	IE Mobile	Opera Mobile	Safari Mobile
Basic support	32	3	10	11.5	6.1

[1] 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.

[2] IE9 has a File API Lab.

[3] Opera has partial support in 11.1.

Tambien ver

FileReader