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 (en-US) se convierte en DONE, y el loadend es lanzado. En ese momento, el atributo result contiene la información como un datos: URL representando la información del archivo como una cadena de caracteres codificados en base64.
Nota: El result de blob no puede ser
directamente decodificado como Base64 sin primero remover la delaración de Datos-URL
de la información codificada en Base64. Para recuperar únicamente la cadena codifidicada
en Base64, primero remueve data:*/*;base64, del resultado.
Sintaxis
instanceOfFileReader.readAsDataURL(blob);
Parametros
Ejemplo
HTML
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
JavaScript
function previewFile() {
const preview = document.querySelector('img');
const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
// convierte la imagen a una cadena en base64
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
Resultado
Ejemplo leyendo multiples archivos
HTML
<input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div>
JavaScript
function previewFiles() {
var preview = document.querySelector('#preview');
var files = document.querySelector('input[type=file]').files;
function readAndPreview(file) {
// Asegurate que `file.name` coincida con el criterio de extensiones
if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
var reader = new FileReader();
reader.addEventListener("load", function () {
var image = new Image();
image.height = 100;
image.title = file.name;
image.src = this.result;
preview.appendChild(image);
}, false);
reader.readAsDataURL(file);
}
}
if (files) {
[].forEach.call(files, readAndPreview);
}
}
Nota: El constructor FileReader() no es soportado por Internet
Explorer versión anterior a la 10. Para una completa compatibilidad de código puedes ver nuestra
imagen previa para una posible solucion entre navegadores.
Véase también este ejemplo más completo.
Especificaciones
| Specification |
|---|
| File API # readAsDataURL |
Compatibilidad con navegadores
BCD tables only load in the browser