如何可靠地將本機文字檔案讀取到網頁瀏覽器中？

將本機文字檔案讀入瀏覽器

要將本機文字檔案讀入瀏覽器，開發人員傳統上使用 XMLHttpRequest。實現此目的的一種方法是透過函數，該函數獲取文件的路徑並將每行文字轉換為字元數組：

function readTextFile() {
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", "testing.txt", true);
  rawFile.onreadystatechange = function() {
    if (rawFile.readyState === 4) {
      var allText = rawFile.responseText;
      document.getElementById("textSection").innerHTML = allText;
    }
  }
  rawFile.send();
}

但是，這種方法通常會失敗，在Firefox 以外的瀏覽器中會出現異常。為了解決這個問題，開發人員應該使用 JS 2015 中引入的 Fetch API：

fetch("myText.txt")
  .then((res) => res.text())
  .then((text) => {
    // do something with "text"
   })
  .catch((e) => console.error(e));

此外，出於安全原因，避免使用 file:/// 至關重要。相反，請考慮使用輕量級 Web 伺服器（例如 Python 的 http.server 或 HTTP-Server）來載入資料。

嘗試使用 XMLHttpRequest 在本機讀取檔案時會出現另一個問題。為了解決這個問題，開發人員應該檢查狀態 0，因為本機檔案載入不會傳回任何狀態：

function readTextFile(file) {
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", file, false);
  rawFile.onreadystatechange = function () {
    if(rawFile.readyState === 4)  {
      if(rawFile.status === 200 || rawFile.status == 0) {
        var allText = rawFile.responseText;
        console.log(allText);
       }
    }
  }
  rawFile.send(null);
}

readTextFile("file:///C:/your/path/to/file.txt");

以上是如何可靠地將本機文字檔案讀取到網頁瀏覽器中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！