HTML5 Filereader 总是返回空字符串？

Question

我现在刚刚学习如何使用文件读取器，我复制了一个在网上找到的示例来进行实验，但由于某种原因，文件读取器总是返回一个空字符串。

首先，我有一个 HTML 表单供用户选择一个文件，然后调用脚本：

<input type="file" id="filelist" onchange="selectfile()">

这是脚本：

function selectfile() {
        myFile = document.getElementById("filelist").files[0];
        reader = new FileReader();
        
        reader.readAsText(myFile);
    
        myResult = reader.result;
        
        alert(myFile.name);
        alert(myResult);
        alert(reader.error);
    }

我已经尝试过在记事本中输入的许多不同的文本文件，并且在每种情况下结果都是相同的。我只通过 html 表单提交一个文件。

这 3 个警报用于测试。

正确显示文件名。 它显示结果的空字符串。 它显示错误 NULL，因此不会出现错误。

我四处搜寻，看看这里是否已经有一些明显的东西，但找不到任何似乎能为我指明正确方向的东西。

想法？

Answer 1

FileReader

对象尚未准备好。您需要向阅读器添加一个

onload

事件监听器，然后调用

readAsText

方法。然后，您可以从回调函数内部访问文件内容。

MDN 文档 - https://developer.mozilla.org/en-US/docs/Web/API/FileReader/result

function selectfile() {
    myFile = document.getElementById("filelist").files[0];
    reader = new FileReader();

    reader.onload = () => {
        myResult = reader.result;

        alert(myFile.name);
        alert(myResult);
        alert(reader.error);
    };


    reader.readAsText(myFile); // only accessible when the FileReader is loaded
}

<input type="file" id="filelist" onchange="selectfile()">