Question

我正在尝试阅读用户目录中的所有文件，并在文本框中显示其内容。

读取单个文件非常有效，但是，当我尝试读取整个目录时，事情变得很奇怪。

在遍历目录时，只能正确读取目录中的最后一个文件。无论目录中有多少文件，此行为都是一致的。

这是我用来读取文件的代码：

Class

这是日志（来自开发工具）：

results.forEach(function(item) {
  reader = new FileReader();

  // This line is reached
  console.log("filename: " + item.name);

  item.file(function(File) {
    // This one only for the last file in that directory
    reader.readAsText(File);
    console.log("success");
  });

  // This line is reached
  console.log("read: " + item.name);
});

如果您有任何疑问，请询问他们，我现在正在尝试这几个小时，而且我已经厌倦了一遍又一遍的失败......

Answer 1

这是因为FileReader异步工作，这意味着它会在代码继续执行时开始执行任务（读取文件）。如果您想在加载完成后立即对每个文件执行某些操作，则需要使用此方法：

reader.onloadend = function(evt) {
    // file is loaded
    // do something with evt.target object
};

Answer 2

我的最终解决方案：

就像abcdn所说，问题在于我用一个新的覆盖了读者。

我通过使用javascript闭包解决了这个问题（因为我来自C＃，我根本不知道存在）。

这是我最后使用的完整代码：

chrome.fileSystem.chooseEntry({type: "openDirectory"}, function(dir) {
  readFolderAsArrayBuffer(dir, function() {
    console.log("read folder");
  });
});


function readFolderAsArrayBuffer(dir, callback) {
  if (dir && dir.isDirectory) {
    var reader = dir.createReader();
    var handlefile = function (entries) {
      for (var i = 0; i < entries.length; i++) {
        arr[i] = (function(fileEntry, number) {
          console.log("returning function " + number);
          entries[number].file(function(file) {
            handleread(fileEntry, file);
            console.log("reading" + url);
          });
        })(entries[i], i);
      }
    }

    var handleerror = function() {
      console.log("error");
    };
    reader.readEntries(handlefile, handleerror);
  }
}

var handleread = function(fileEntry, file) {
  var fileReader = new FileReader();
  fileReader.onloadend = function(evt) {
    console.log("Read file: " + fileEntry.name + "with the content: " + evt.target.result);
  };
  fileReader.readAsText(file);
}

这将读取整个用户选择的目录，并将每个文件的内容输出到控制台。

readAsText（file）只读取目录中的最后一个文件

2 个答案: