Html 将参数传递给 FileReader onload 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16937223/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pass a parameter to FileReader onload event
提问by BeNdErR
I need to read some csv files, given by the user. Files are passed to the page/script using a drag and drop div, that handles the file drop as follows:
我需要读取用户提供的一些 csv 文件。使用拖放 div 将文件传递到页面/脚本，其处理文件放置如下：
function handleFileDrop(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
...
}
I need to parse each file with a csv library that converts it into an array, but I also need to keep track of the file name I'm currently parsing. Here's the code I use to parse each file:
我需要使用 csv 库解析每个文件，将其转换为数组，但我还需要跟踪我当前正在解析的文件名。这是我用来解析每个文件的代码：
for(var x = 0; x < files.length; x++){
var currFile = files[x];
var fileName = currFile.name;
var reader = new FileReader();
reader.onload = (function(theFile){
return function(e){
var csvArr = CSV.csvToArray( e.target.result, ";", true );
console.log(csvArr);
};
})(currFile);
reader.readAsText(currFile);
}
Until this, everything works great. What I need is to also pass the filename to the reader.onloadevent, eg:
在此之前，一切正常。我需要的是还将文件名传递给reader.onload事件，例如：
reader.onload = (function(theFile){
return function(e){
***** I need to have fileName value HERE *****
};
})(currFile);
Is possible? How can I do this? Thanks in advance for any help, best regards
有可能吗？我怎样才能做到这一点？在此先感谢您的帮助，最好的问候
回答by Graham
Try the following:
请尝试以下操作：
var reader = new FileReader();
reader.onload = (function(theFile){
var fileName = theFile.name;
return function(e){
console.log(fileName);
console.log(e.target.result);
};
})(currFile);
reader.readAsText(currFile);
Here, you're creating a new fileNamevariable each time a file is passed to the outer method. You're then creating a function which has access that variable (due to the closure) and returning it.
在这里，fileName每次将文件传递给外部方法时，您都会创建一个新变量。然后，您将创建一个可以访问该变量（由于关闭）并返回它的函数。
回答by Janghou
Use Blob API
使用 Blob API
Using the new File / Blob APIit can be done much easier.
使用新的 File / Blob API可以更轻松地完成。
Your second code block - also solving your problem - could be rewritten as:
您的第二个代码块 - 也解决了您的问题 - 可以重写为：
for (let file of files){
(new Blob([file])).text().then(x=>console.log(file.name,x));
}
The Blob API uses Promises instead of Events like the Filereader API, so much less troubles with closures. Also the Arrow function(x=>)and iteratorfor of,make the code much more concise.
Blob API 使用 Promises 而不是 Filereader API 之类的事件，因此闭包的麻烦更少。还有箭头函数(x=>)和for of 的迭代器，使代码更加简洁。
Check support.
检查支持。
Use Fetch API
使用获取 API
Also using the Fetch API Response Objectit can be done more easy.
同样使用Fetch API 响应对象可以更容易地完成。
for (let file of files){
(new Response(file)).text().then(x=>console.log(file.name,x));
}
Note of the missing Array []in the constructor.
注意Array []构造函数中的缺失。
Also check support.
还要检查支持。
