javascript - jQueryeach + FileReader 不返回正确的值

Question

我正在尝试读取 2 个 CSV 文件，每个文件都包含数字行。

<input type="file" id="file[0]" name="file[0]">
<input type="file" id="file[1]" name="file[1]">

文件1内容:

111
222

文件2内容:

333
444

读取内容后，我将数字推送到新数组 (csv_arr) 并计算出现次数 (csv_cnt)。

var csv_arr = new Array();
var csv_cnt = 0;

$("[id^=file]").each(function(index) {
    file = $(this)[0].files[0];

    if (file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var csv_val = e.target.result.split("\r\n");

            for (var i = 0; i < csv_val.length; i++) {
                csv_arr.push( csv_val[i] );
                csv_cnt++;
            }
        };
        reader.readAsText(file);
    }
});

console.log(csv_arr);
console.log(csv_arr.length);
console.log(csv_cnt);

console.log的结果是:

['111','222','333','444']
0
0

从结果中可以看到，数组看起来没问题，但是数组长度和计数都是 0!我被困住了，不确定到底出了什么问题。有什么想法吗？

Answer 1

您的代码可以工作，但您忘记了filereader是异步。
这意味着您的 console.logs 将在 onload 仍在加载数据时触发。

没有。你的数组，(至少使用你发布的确切代码)无法得到你所说的结果 - 否则你会得到 4 和 4因为数组有值。这意味着您将得到以下结果:

[]
0
0

将 console.logs 传递到 onload 函数中，您将得到:

["111", "222"]
2
2
["111", "222", "333", "444"]
4
4