为什么在尝试读取多个文件时 FileReader.readAsText() 会抛出未捕获的 DOM 异常？答案

【问题标题】：Why does FileReader.readAsText() throw an Uncaught DOM Exception when multiple files are trying to be read?为什么在尝试读取多个文件时 FileReader.readAsText() 会抛出未捕获的 DOM 异常？
【发布时间】：2021-09-21 00:59:54
【问题描述】：

TLDR; 想做一个文本编辑器，成功了，现在我正在尝试有一个上传功能。

我想以文本的形式读取每个文件，但我不确定自己是否正确。

这是我的脚本：

function main() {
    $('#imported-files').on('change', function() {
        var files = this.files,
            reader = new FileReader();
        console.log(typeof(files))
        reader.onload = function(e) {
            console.log(e.target.result);
        }
        for (let i = 0, numFiles = files.length; i < numFiles; i++) {
            const file = files[i];
            reader.readAsText(file)
        }
        
    })
}

$(document).ready(main);

YES 输入标签是多个，并且接受所有文件类型。我得到了 change 事件并得到了文件和一个新的 FileReader obj。加载后，它会读取文件结果。

这适用于单个上传的文件

但是当 for 循环在 files 列表中有多个文件时，它会抛出一个错误，因为它已经在读取一个文件。

我无法证明这样做的可能解决方案：

为每个循环创建一个新的 FileReader，对于小文件列表来说似乎很可靠，但不是最佳实践
为阅读器编写一个承诺，使其成为一个同步动作，然后继续循环

我也不太了解 FileReader API，但是通过 Mozilla 网站阅读，我发现它具有不同的功能来检查文件阅读器的状态。如果有人能提供一些启发，那就太棒了。

【问题讨论】：

标签： javascript jquery filereader input-type-file

【解决方案1】：

我知道 Promise 不会使异步任务同步
想出了解决问题的办法
尝试过承诺，但对我来说效果不佳，但我可能做得不对

如果有人有一个承诺解决方案，我仍然很喜欢。

How to await the FileReader object without Promises

【讨论】：