HTML5 Filereader 总是returns 空字符串？

Question

我现在正在学习如何使用文件阅读器，我复制了一个我在网上找到的例子来试验，但由于某种原因，文件阅读器总是returns一个空字符串。

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

<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 对象还没有准备好。您需要向 reader 添加一个 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()">

HTML5 Filereader 总是returns 空字符串？

HTML5 Filereader always returns empty string?

html

javascript

filereader