javascript - 带有结果和参数的 FileReader 加载

Question

我无法同时获取文件读取器的结果和 onload 函数中的一些参数。这是我的代码:

控件的 HTML:

<input type="file" id="files_input" multiple/>

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);
    }
  }

添加事件:

 files_input.addEventListener("change", openFiles, false);

我在onload 函数中使用filereader.result。如果我为此函数使用参数(例如文件)，我将无法再访问结果。例如，我想在 onload 函数中使用 file.name 。如何解决这个问题？

Answer 1

尝试将 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);
    }
}

有关为何需要此处关闭的讨论，请参阅以下相关问题:

• JavaScript closure inside loops – simple practical example
• Javascript infamous Loop issue?