JavaScript - 使用HTML5 FileReader讀取文件

Question

我正在學習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文件是currenty只包含一個“1”，它將這個數字記錄到控制台，但我無法使用它，如果我試圖將它推入一個數組，值突然未定義。 我的目標是稍后在程序中使用該文件的內容

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>

JavaScript - 使用HTML5 FileReader讀取文件

問題描述

1 個解決方案

解決方案1
0 2018-05-12 09:39:49

JavaScript - 使用HTML5 FileReader讀取文件

問題描述

1 個解決方案

解決方案1 0 2018-05-12 09:39:49

解決方案1
0 2018-05-12 09:39:49