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 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
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
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.