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 | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 3.6 (1.9.2)[1] | 7 | (Yes) | 10 | 12.02[2] | 6.0 |
| Support in Web Workers | 46 (46) | (Yes) | (Yes) | No support | (Yes) | No support |
error property uses DOMException, not DOMError |
58 (58) | (Yes) | (Yes) | No support | (Yes) | No support |
| Feature | Firefox Mobile (Gecko) | Android | Edge | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 32 | 3 | (Yes) | 10 | 11.5 | 6.1 |
| Support in Web Workers | 46.0 (46) | (Yes) | (Yes) | No support | (Yes) | No support |
error property uses DOMException, not DOMError |
58.0 (58) | ? | (Yes) | No support | (Yes) | No support |
[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] Opera has partial support in 11.1.