如何閱讀使用javascript保存在我的計算機上的文本文件

我有一個定期更新的文本文件，我想知道是否可以使用javascript逐行閱讀文件，並將值保存在變量，然後在每次加載頁面時使用新值更新html頁面。 HTML頁面是一個簡單的頁面，用於顯示工作中的信息，而不是實時的網頁，除了僅在兩個頁面之間導航外，不需要任何用戶輸入。文本文件位於每個人都可以訪問的網絡驅動器上。這裏是什麼，我試圖完成一個例子：如何閱讀使用javascript保存在我的計算機上的文本文件

var value1; 
var value2;

閱讀使用JavaScript如果可能的話，並提取數據文件並分配到VALUE1和VALUE2。

document.getElementsByClassName("class for <p>")[0].innerHTML = value; 
document.getElementsByClassName("class for another <p>")[0].innerHTML = value;

我GOOGLE了這個，但無法找到任何工作。如果這對於JS來說是不可能的，那麼關於如何以不同方式完成這些任何建議。提前致謝。

來源

2016-12-15 fGk

這是不可能做到這一點沒有一個Web服務器（Apache時，Nginx的細節，Node.js表示...）：瀏覽器JS無法訪問硬盤上的文件作爲安全措施。 – Amadan

首先，您需要使用input[type=file]才能獲得File。

<input type=file id=file/> 
<div id=result></div>

然後用FileReader讀取文件到目標格式，就像base64，text，buffer。

const file = document.getElementById('file').files[0] 
const result = document.getElementById('result') 
const reader = new FileReader 
reader.addEventListener('load',() => { 
    result.innerHTML = reader.result 
}) 
reader.readAsText(file, 'UTF-8')

參見：https://developer.mozilla.org/en-US/docs/Web/API/FileReader

來源

2016-12-15 02:25:28 kcats

你可以使用JavaScript FileReader和input type="file"在你的機器讀取本地文件。例如，請參閱下面的附加代碼。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script> 
 
     function OnFileLoad() { 
 
      var file = document.getElementById("FileReader").files[0]; 
 
      var textType = /text.*/; 
 
      var fileDisplayArea = document.getElementById("FileContent"); 
 
      if (file.type.match(textType)) { 
 
       var reader = new FileReader(); 
 

 
       reader.onload = function (e) { 
 
        fileDisplayArea.innerText = reader.result; 
 
       } 
 

 
       reader.readAsText(file); 
 
      } else { 
 
       fileDisplayArea.innerText = "File not supported!" 
 
      } 
 
     } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <input type="file" id="FileReader" onchange="OnFileLoad()" /> 
 
    <div id="FileContent">Your content will appear here</div> 
 
</body> 
 

 
</html>

爲了確定您可能需要在一臺服務器以及文件路徑。我附上了一個示例代碼。你可以找到關於指定文件路徑here和問題會發生讀取文件，而無需服務器[here][2]

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script> 
 
     function readTextFile(file) { 
 
      var rawFile = new XMLHttpRequest(); 
 
      rawFile.open("GET", file, false); 
 
      var fileDisplayArea = document.getElementById("FileContent"); 
 
      rawFile.onreadystatechange = function() { 
 
       if (rawFile.readyState === 4) { 
 
        if (rawFile.status === 200 || rawFile.status == 0) { 
 
         var allText = rawFile.responseText; 
 
         fileDisplayArea.innerText = allText; 
 
        } 
 
       } else { 
 
        fileDisplayArea.innerText = "File not supported!" 
 
       } 
 
      } 
 
      rawFile.send(null); 
 
     } 
 
     readTextFile("file:///C:/Users/t0423/Desktop/test.js") 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="FileContent">Your content will appear here</div> 
 
</body> 
 

 
</html>

來源

2016-12-15 02:38:42 Nitheesh

不錯的代碼！也許可以解釋一下它做了什麼以及爲什麼，而不是僅僅提交一個很少或沒有解釋的代碼片段。雖然寫得很好:) – pattyd

是否可以通過指定文件路徑自動加載文件並分解JS中的數組中的每一行？然後，也許我可以從每行字符串中獲取值並更新網頁的不同部分。我不想做的就是按照原樣顯示文件。我想使用這些數據更新不同標籤的值。 – fGk

是的，你可以。在你可以在你想要的區域使用它之後，你可以使用javascript split功能將文件的內容分割。 – Nitheesh

如何閱讀使用javascript保存在我的計算機上的文本文件

回答

相關問題