FileReader.readAsDataURL()
io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/es/web/api/file_api/index.md)
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 |
Compatibilidad con navegadores
BCD tables only load in the browser