异步加载文件后获取文件名

Question

我正在加载一个目录中的多个文件，以便从这些文件中解析一些数据。到目前为止，这个工作做得很好，但是我想知道我正在查看哪个文件。因此，我需要在加载后获取文件的名称。

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

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

- Sidrich2009

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

- ebidel

---

看起来不错！但是你能否在这里发布你的答案/示例...我想知道那个闭包是如何工作的。 - Sidrich2009

1. 对于（var i = 0，f; f = files [i]; i ++），我不太理解这个方式编写for循环在做什么。
2. 您的 onload =（'长函数调用'）（f），我也从未见过^^它是什么以及如何/为什么在函数后面加上f？

- Sidrich2009

更好的方法是将文件条目作为属性附加到您的读取器上，正如此用户的问题所示： https://dev59.com/Om855IYBdhLWcg3wVist#4404427 - kokorohakai

非常感谢。在 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);...}。 - Manu Chadha

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

- Thibault T

---

当我在我的Angular代码中这样做时，IDE会抱怨fileReader中不存在fileName。我知道我们正在添加该属性，但Angular不允许编译。 - Manu Chadha

将一个属性添加到文件读取器中，这个功能运行良好。 - Jacky