HTML5 Filereader 总是返回空字符串？答案

【问题标题】：HTML5 Filereader always returns empty string?HTML5 Filereader 总是返回空字符串？
【发布时间】：2020-08-10 23:07:02
【问题描述】：

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

首先，我有一个 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，因此不会出现错误。

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

想法？

【问题讨论】：

FileReader 方法是异步的 - 您需要使用 FileReader events 来访问已完成的读取
也许第一个搜索javascript using filereader的结果会启发你-javascripture.com/FileReader

标签： javascript html filereader

【解决方案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
        }

&lt;input type="file" id="filelist" onchange="selectfile()"&gt;

【讨论】：