文件读取器异步加载文件后获取文件名答案

【问题标题】：Get filename after filereader asynchronously loaded a file文件读取器异步加载文件后获取文件名
【发布时间】：2012-09-14 20:02:40
【问题描述】：

我正在一个目录中加载几个文件，以便从中解析一些数据。到目前为止，这很好用，但我想知道我正在查看哪个文件。所以我需要文件加载后的名称。有人可以帮忙吗？

// 获取目录下的所有文件

function updateData(){
  var dirReader = approot.createReader();

  var fail =failCB('Error - Directory for parsing failed to open'); // logs fail...
  dirReader.readEntries(parseData,fail); 
}

//加载每个文件

function parseData(entries){
  var i;
  for (i=0; i<entries.length; i++) {
    var reader = new FileReader();
    reader.onloadend = createListItem;
    reader.readAsText(entries[i]);
  }
}

// 在这里我想知道这个名字！！！！

function createListItem(evt){
    // it gives me all the loaded data. But based on which file it was, I would like to handle it!
  console.log(evt.target.result)
    // lets say something like this
    $('#content').find(   file.name   ).append(evt.target.result);
  }
}

【问题讨论】：

标签： javascript android cordova fileapi

【解决方案1】：

围绕File 创建一个闭包来捕获当前文件。然后你可以得到文件名。

一个例子：http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files

关闭捕获文件信息。

function parseData(entries){
  for (var i=0; i<entries.length; i++) {
    reader.onloadend = (function(file) {
      return function(evt) {
        createListItem(evt, file)
      };
    })(entries[i]);
    reader.readAsText(entries[i]);
  }
}

并且被调用的函数得到一个额外的参数

function createListItem(evt, file) {
  console.log(evt.target.result)
  console.log(file.name);
}

【讨论】：

看起来不错！但是您能否在此处发布您的答案/示例...我想知道该关闭是如何工作的。
有些部分我没有得到： 1. for (var i = 0, f; f = files[i]; i++) 那是什么我从来没有见过这样写 for 循环2. 你的 onload = ('long function call' )( f ) ，也从未见过 ^^它是做什么的以及如何/为什么函数后面有一个 f？
更好的方法是将您的文件条目作为属性附加到您的阅读器，如此用户问题所示：stackoverflow.com/questions/4404361/…
非常感谢。在 Angular 中，我必须绑定 this - reader.onload = (function(filename){ return function(event){ this.handleReaderLoaded(event,filename); } }(uploadedFilename)).bind(this); 和 handleReaderLoaded(event: FileReaderProgressEvent, filename) { console.log('loaded file ',filename);...}

【解决方案2】：

以下源码给文件阅读器添加一个属性

    for(i=0; i < files.length; i++)
    {
        var fileReader = new FileReader();
        fileReader.onload = function(file)
        {
              // DO what you need here
              // file name = file.target.fileName
        } // end of reader load
        fileReader.fileName = files[i].name;
        fileReader.readAsBinaryString(files[i]);
    }

【讨论】：

当我在 Angular 代码中执行此操作时，IDE 抱怨 fileName 在 fileReader 中不存在。我知道我们正在添加该属性，但 Angular 不允许它编译。
给文件阅读器添加一个属性，效果很好。