FileReader.readAsDataURL()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
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 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);
}
}
Especificaciones
| Specification |
|---|
| File API # readAsDataURL |