manejo - Leyendo múltiples archivos con Javascript FileReader API uno a la vez
read file javascript (3)
Esto debería leer los archivos uno por uno:
function readmultifiles(files) {
var ul = document.querySelector("#bag>ul");
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
}
// Read first file
setup_reader(files, 0);
}
// Don''t define functions in functions in functions, when possible.
function setup_reader(files, i) {
var file = files[i];
var name = file.name;
var reader = new FileReader();
reader.onload = function(e){
readerLoaded(e, files, i, name);
};
reader.readAsBinaryString(file);
// After reading, read the next file.
}
function readerLoaded(e, files, i, name) {
// get file content
var bin = e.target.result;
// do sth with text
var li = document.createElement("li");
li.innerHTML = name;
ul.appendChild(li);
// If there''s a file left to load
if (i < files.length - 1) {
// Load the next file
setup_reader(files, i+1);
}
}
Estoy usando la API FileReader para leer varios archivos.
<html> <body>
<input type="file" id="filesx" name="filesx[]"
onchange="readmultifiles(this.files)" multiple=""/>
<div id="bag"><ul/></div>
<script>
window.onload = function() {
if (typeof window.FileReader !== ''function'') {
alert("The file API isn''t supported on this browser yet.");
}
}
function readmultifiles(files) {
var ul = document.querySelector("#bag>ul");
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
}
function setup_reader(file) {
var name = file.name;
var reader = new FileReader();
reader.onload = function(e) {
var bin = e.target.result; //get file content
// do sth with text
var li = document.createElement("li");
li.innerHTML = name;
ul.appendChild(li);
}
reader.readAsBinaryString(file);
}
for (var i = 0; i < files.length; i++) { setup_reader(files[i]); }
}
</script> </body> </html>
El problema es que todos los archivos se leen al mismo tiempo, y cuando los archivos tienen un tamaño total (suma) muy grande, el navegador falla.
Quiero leer un archivo tras otro, para reducir el consumo de memoria.
es posible?
Estoy actualizando esta pregunta para el beneficio de los nuevos usuarios, que están buscando una solución para cargar múltiples archivos a través de FileReader , especialmente utilizando ES.
En lugar de iterar manualmente sobre cada archivo, es mucho más sencillo y limpio utilizar Object.keys(files) en ES :
<input type="file" onChange="readmultifiles" multiple/>
<script>
function readmultifiles(e) {
const files = e.currentTarget.files;
Object.keys(files).forEach(i => {
const file = files[i];
const reader = new FileReader();
reader.onload = (e) => {
//server call for uploading or reading the files one-by-one
//by using ''reader.result'' or ''file''
}
reader.readAsBinaryString(file);
})
};
</script>
Se me ocurrió una solución que funciona.
function readmultifiles(files) {
var reader = new FileReader();
function readFile(index) {
if( index >= files.length ) return;
var file = files[index];
reader.onload = function(e) {
// get file content
var bin = e.target.result;
// do sth with bin
readFile(index+1)
}
reader.readAsBinaryString(file);
}
readFile(0);
}