FileReader.readAsDataURL()

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

El método readAsDataURL es usado para leer el contenido del especificado BlobFile.  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 BlobFile 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

Compatibilidad de navegadores

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

Etiquetas y colaboradores del documento

 Colaboradores en esta página: teoli, empirreamm, developersoul
 Última actualización por: teoli,