时间戳

首页 > 解决方案 > HTML5 Filereader 总是返回空字符串？

javascript - HTML5 Filereader 总是返回空字符串？

问题描述

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

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

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

想法？

标签： javascripthtmlfilereader

解决方案

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()">

推荐阅读