Javascript FileReader 加载结果和参数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27254735/
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
FileReader onload with result and parameter
提问by PatriceG
I can't manage to get both the result of the filereader and some parameters in a onload function. This is my code:
我无法在 onload 函数中同时获得文件读取器的结果和一些参数。这是我的代码：
HTML of control:
控件的 HTML：
<input type="file" id="files_input" multiple/>
Javascript function:
Javascript函数：
function openFiles(evt){
var files = evt.target.files;
for (var i = 0; i < files.length; i++) {
var file=files[i];
reader = new FileReader();
reader.onload = function(){
var data = $.csv.toArrays(this.result,{separator:'\t'});
};
reader.readAsText(file);
}
}
Add event:
添加事件：
files_input.addEventListener("change", openFiles, false);
I use the filereader.result, in the onloadfunction. If I use a parameter, like file, for this function, I can't not access to the result anymore. For example I'd like to use file.namein the onload function. How to resolve this issue ?
我filereader.result在onload函数中使用, 。如果我为此函数使用参数（如文件），则无法再访问结果。例如我想file.name在 onload 函数中使用。如何解决这个问题？
回答by Chris
Try wrapping your onload function in another function. Here the closure gives you access to each file being processed in turn via the variable f:
尝试将您的 onload 函数包装在另一个函数中。在这里，闭包使您可以通过变量依次访问每个正在处理的文件f：
function openFiles(evt){
var files = evt.target.files;
for (var i = 0, len = files.length; i < len; i++) {
var file = files[i];
var reader = new FileReader();
reader.onload = (function(f) {
return function(e) {
// Here you can use `e.target.result` or `this.result`
// and `f.name`.
};
})(file);
reader.readAsText(file);
}
}
For a discussion of why a closure is required here see these related questions:
有关为什么需要在此处关闭的讨论，请参阅以下相关问题：
回答by sergolius
You should use closure at 'onload' handler. Example: http://jsfiddle.net/2bjt7Lon/
您应该在“onload”处理程序中使用闭包。示例：http: //jsfiddle.net/2bjt7Lon/
reader.onload = (function (file) { // here we save variable 'file' in closure
return function (e) { // return handler function for 'onload' event
var data = this.result; // do some thing with data
}
})(file);
回答by sahilbathla
Event handling is asynchronous and thus they pick up the latest value of all the enclosed local variables(i.e. closure). To bind a particular local variable to the event, you need to follow the code suggested by users above or you can look at this working example:-
事件处理是异步的，因此它们获取所有封闭局部变量（即闭包）的最新值。要将特定的局部变量绑定到事件，您需要按照上面用户建议的代码进行操作，或者您可以查看此工作示例：-
http://jsfiddle.net/sahilbatla/hjk3u2ee/
http://jsfiddle.net/sahilbatla/hjk3u2ee/
function openFiles(evt){
var files = evt.target.files;
for (var i = 0; i < files.length; i++) {
var file=files[i];
reader = new FileReader();
reader.onload = (function(file){
return function() {
console.log(file)
}
})(file);
reader.readAsText(file);
}
}
#Using jQuery document ready
$(function() {
files_input.addEventListener("change", openFiles, false);
});
回答by Muhammet Can TONBUL
For Typescript;
对于打字稿；
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
reader.onload = ((file: any) => {
return (e: Event) => {
//use "e" or "file"
}
})(file);
reader.readAsText(file);
}
回答by Banu
As the variable fileis within the scope, you may use the filevariable without passing it to function.
由于变量文件在范围内，您可以使用文件变量而不将其传递给函数。
function openFiles(evt){
var files = evt.target.files;
for (var i = 0; i < files.length; i++) {
var file=files[i];
reader = new FileReader();
reader.onload = function(){
alert(file.name);
alert(this.result);
};
reader.readAsText(file);
}
}
files_input.addEventListener("change", openFiles, false);<input type="file" id="files_input" multiple/>