在本地html文件中使用XMLHttpRequest加載“服務器端”文件

Question

我想在我的JavaScript中加載json字符串化文件。 javascript位於我從本地文件系統加載的html文件中。

我嘗試使用以下代碼：

var xhr = new XMLHttpRequest();
xhr.open('GET', fileName, true);
xhr.responseType = 'blob';  

xhr.onload = function(e) {
  if (this.status == 200) {
    // get binary data as a response
    var blob = this.response;
    alert("Yo");
  }
};

但是onload事件僅觸發一次，狀態為0，然后不再發生。

我嘗試使用文件的完整路徑以及“ /files/the_file.txt”之類的本地文件路徑。

看來問題與我嘗試在本地運行html文件有關。 我不想設置本地服務器，正如我在此處類似文章中所看到的那樣。

有沒有解決這個問題的人？

編輯：

這不是我想要的，但這可能可以作為我幾乎想要的示例。 這個例子讓用戶選擇一個文件，我的腳本現在可以訪問所選文件的內容。

HTML：

<input type="file" id="FancyInputField" onchange="doIt();">

Javascript：

function doIt(){
    var selectedFile = document.getElementById('FancyInputField').files[0];

    reader = new FileReader();

    reader.onload = function (e) {
        var output = reader.result;     
        var daObject = JSON.parse(output);
    }

    reader.readAsText(selectedFile);
}

這也適用於本地html文件。 （沒有本地服務器）

我的問題仍然存在； 我如何在沒有用戶交互的情況下讀取文件？ 這些文件位於html文件所在的子文件夾中。 我可以毫無問題地加載並使用<img>標簽顯示來自同一子文件夾的圖像。 ..那么為什么加載文本文件如此困難？

Answer 1

我如何在沒有用戶交互的情況下讀取文件？

你不能 這些文件屬於用戶，而不是您的網站。 您不能選擇閱讀它們。

我可以毫無問題地加載並使用<img>標簽顯示來自同一子文件夾的圖像

向用戶顯示圖像和使文件內容可用於頁面作者編寫的JavaScript代碼之間有很多區別。

那么為什么加載文本文件如此困難呢？

1. 向他人發送電子郵件中的HTML文檔
2. 享受其中的JavaScript，從硬盤中搜索文件並將其發送到Joe Evil Hacker的服務器

這只是基本的安全性。

Answer 2

使用URL.createObjectURL(file)代替ajax。