一次使用一个Javascript FileReader API读取多个文件 [英] Reading multiple files with Javascript FileReader API one at a time
本文介绍了一次使用一个Javascript FileReader API读取多个文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用 FileReader API读取多个文件。
< html> <身体GT;
< input type =fileid =filesxname =filesx []
onchange =readmultifiles（this.files）multiple =/>
< div id =bag>< ul />< / div>
< script>
window.onload = function（）{
if（typeof window.FileReader！=='function'）{
alert（该浏览器不支持该文件API。 ）;
函数readmultifiles（files）{
var ul = document.querySelector（＃bag> ul）;
while（ul.hasChildNodes（））{
ul.removeChild（ul.firstChild）;
}
函数setup_reader（文件）{
var name = file.name;
var reader = new FileReader（）;
reader.onload = function（e）{
var bin = e.target.result; //获取文件内容
//用文本做某事
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> < /体> < / HTML>
问题是所有文件都是同时读取的，并且当文件的总大小（总和），这是非常大的，浏览器崩溃。
我想读取一个接一个的文件，以便减少内存消耗。
这可能吗？
解决方案
我自己想出了一个解决方案。 p>
function readmultifiles（files）{
var reader = new FileReader（）;
函数readFile（index）{
if（index> = files.length）return;
var file = files [index];
reader.onload = function（e）{
//获取文件内容
var bin = e.target.result;
//用bin做bh
readFile（index + 1）
}
reader.readAsBinaryString（file）;
}
readFile（0）;
}
I'm using the FileReader API to read multiple files.
<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>
The problem is that all files are read at the same time, and when the files have a total size (sum) that is very large, the browser crashes.
I want to read one file after another, so that the memory consumption is reduced.
Is this possible?
解决方案
I came up with a solution myself which works.
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);
}
这篇关于一次使用一个Javascript FileReader API读取多个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
