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
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
BCD tables only load in the browser