Question

我必须将一些测试文本文件读入我的JavaScript代码中。共有3个文件，标题为watcherid = request.headers['X-GOOG-CHANNEL-ID']，1.txt和2.txt，每个文件都包含一行。我写了这段代码，我认为它可以正常工作：

3.txt

这会在网页上生成一个按钮，允许我选择多个文件。它应该导致以下结果：

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    for (var i = 0; i < files.length; i++) {
        console.log("Start loop")
        myFile = files.item(i);
        var myReader = new FileReader();
        myReader.readAsText(myFile);
        myReader.onload = function(e) {
            var rawLog = myReader.result;
            console.log(rawLog)
        };

    }
};

document.getElementById('files').addEventListener('change', handleFileSelect, false);

但它输出的内容如下：

Start loop
Contents 1.txt
Start loop
Contents 2.txt
Start loop
Contents 3.txt

如何生成第一个？我希望错误出现在onload函数中，但我不确定我做错了什么......

Answer 1

在你的代码var myReader = new FileReader();中重新分配每个循环中的变量，从而破坏第一个实例。

我建议您将代码拆分为两个函数，以防止本地块变量的实例在完成之前被覆盖。

function readFile(file) {
    var myReader = new FileReader();
  myReader.readAsText(file);
  myReader.onload = function(e) {
      var rawLog = myReader.result;
      console.log(rawLog)
  };
} 

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    for (var i = 0; i < files.length; i++) {
        myFile = files.item(i);
        readFile(myFile);
    }
};

使用Javascript读取多个文件会导致只读取最后一个文件

1 个答案: