JavaScript-使用HTML5文件读取器读取文件

我目前正在学习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”，它将这个数字记录到控制台，但我无法使用它，如果我尝试将其放入数组中，则值突然未定义。我的目标是以后在程序中使用文件的内容。如果文本文件仅包含字符串，则无需使用JSON.parse。

数据

包含所有文本文件内容

二,。您需要将

var content=[]
全局而非函数readFile内部

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

遵循这段代码，我认为它会解决您的问题




自定义上载
var内容=[]；
函数readFile（文件，f）{
var reader=new FileReader（）；
reader.onload=函数（evt）{
f（evt、目标、结果）；
};
var text=reader.readAsText（文件）；
}
var fileBtn=document.getElementById（“文件上载”）；
var logContnt=document.getElementById（“日志内容”）；
logContnt.addEventListener（“单击”，函数（）{
警报（内容）；
})
fileBtn.addEventListener（“更改”，函数（）{
var file=fileBtn.files[0]；
readFile（文件、函数（数据）{
内容推送（数据）；
});
});
JSON.parse（“1”）！=“1”
因此第1点不相关。第二点可能是问题所在，你错了。当您对解析后的值使用JSON.parse时，您会得到此异常未捕获的语法错误：JSON中的意外标记a位于JSON.parse（）的位置1，位于FileReader.reader.onload（i.html:24）的i.html:37，您可以自己尝试更改content.push（数据）；到content.push（JSON.parse（data））；如果文本文件只是
1
，那么
reader.result
将是
“1”
，如果您将其传递给
JSON.parse（）
，它将输出
1
。您可以自己尝试，使用一个仅由
1
组成的文本文件。OP没有抱怨这个错误，如果他们试图读取的内容是JSON格式的，那么没有理由告诉他们不要使用它。（Ps:JSON.parse将强制将传递给它的任何内容转换为字符串，因此传递数字不会抛出）谢谢，它工作得有点好，但是如果不使用全局数组和另一个按钮，该如何进行呢？如果我尝试在不使用logContnt的情况下执行相同的操作，那么数组内容再次是未定义的。这只是显示内容值的一种简单方法。为什么您认为加载文本文件后内容值未定义？