JavaScript - 使用 HTML5 FileReader 读取文件答案

【问题标题】：JavaScript - Reading file with HTML5 FileReaderJavaScript - 使用 HTML5 FileReader 读取文件
【发布时间】：2018-05-12 09:09:11
【问题描述】：

我目前正在学习 JavaScript，我正在努力阅读一个 txt 文件并在程序中使用它的内容，目前为止：

fileBtn.addEventListener("change", function()
{ 
 var content = [];
 var file = fileBtn.files[0];
 readFile(file, function(data)
 {
   console.log(JSON.parse(data));
   //content.push(JSON.parse(data)) doesn't work, data is undef.
 });

});

还有一个函数 readFile

function readFile(file, f)
{
  var reader = new FileReader();
  reader.onload = function(evt)
  {
   f(evt.target.result);
  };
   reader.readAsText(file);
}

我的 txt 文件目前只包含一个“1”，它会将这个数字记录到控制台，但我无法使用它，如果我尝试将它推入一个数组，值会突然未定义。我的目标是稍后在程序中使用文件的内容

【问题讨论】：

标签： javascript file

【解决方案1】：

1 .如果文本文件仅包含 string ，则无需使用 JSON.parse 。 data 包含所有文本文件内容

2 。你需要把var content = []; 全局而不是在函数 readFile 中

按照这个sn-p的代码我认为它会解决你的问题

<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
    <label for="file-upload" class="custom-file-upload">
        Custom Upload
    </label>
    <input id="file-upload" type="file" />
    <input id="log-content" type="button" value="Click Me"/>

</body>



<script>
    var content = [];

    function readFile(file, f) {
        var reader = new FileReader();
        reader.onload = function (evt) {
            f(evt.target.result);
        };
        var text = reader.readAsText(file);
    }
    var fileBtn = document.getElementById("file-upload");
    var logContnt = document.getElementById("log-content");

    logContnt.addEventListener("click", function () {
        alert(content);
    })
    fileBtn.addEventListener("change", function () {
        var file = fileBtn.files[0];
        readFile(file, function (data) {
            content.push(data);
        });

    });
</script>



</html>

【讨论】：

JSON.parse("1") !== "1" 所以第 1 点无关紧要。不过，第 2 点可能是问题所在。
你错了。当您在解析值上使用 JSON.parse 时，您会收到此异常 Uncaught SyntaxError: Unexpected token a in JSON at JSON.parse () at i.html:37 at FileReader.reader.onload (i.html :24) 自己尝试改变 content.push(data); to content.push(JSON.parse(data));
如果文本文件只是1，那么reader.result将是"1"，如果你将它传递给JSON.parse()，它将输出1。使用仅由 1 组成的文本文件自己尝试一下。 OP 没有抱怨这个错误，如果他们试图阅读的内容是 JSON 格式，没有理由告诉他们不要使用它。（Ps：JSON.parse 会将你传递给它的任何内容强制转换为字符串，因此传递数字不会抛出）
谢谢，它可以工作，但不使用全局数组和另一个按钮怎么办？如果我尝试在没有 logContnt 的情况下做同样的事情，则数组内容再次未定义
它只是一种显示内容值的简单方法。为什么您认为加载文本文件后内容值未定义？