JavaScript - 使用HTML5 FileReader读取文件

Question

JavaScript - 使用HTML5 FileReader读取文件

3

我目前正在学习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”，它会将这个数字记录到控制台，但我无法处理它，如果我尝试将它推入数组中，这个值就变成了未定义。我的目标是稍后在程序中使用文件的内容。

- Ptero

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Naor Tedgi · Answer 1

1. 如果文本文件只包含字符串，则无需使用JSON.parse。 data 包含所有文本文件内容。

2. 您需要在全局范围内放置 var content = [];，而不是在函数readFile内部。

请按照以下代码片段操作，我认为它将解决您的问题。

<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>