在本地 html 文件中使用 XMLHttpRequest 加载 'server-side' 文件

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 文件有关。我不想设置本地服务器，正如我在此处的类似帖子中看到的那样。

有人解决了这个问题吗？

编辑：

这不是我想要的，但这可能是我几乎想要它的一个例子。这个例子让用户 select 一个文件，我的脚本现在可以访问 selected 文件的内容。

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

使用 URL.createObjectURL(file)，而不是 ajax。

Answer 2

How do I read the file(s) with no user interaction?

你不能。这些文件属于用户，而不是您的网站。你不能选择阅读它们。

I can with no problem load and show an image from the same sub-folder, with an <img> tag

向用户显示图像与让页面作者编写的 JavaScript 代码可以访问文件内容之间存在很大差异。

So why is it so difficult to load a text file?

通过电子邮件向某人发送 HTML 文档
享受其中的JavaScript 从硬盘中取出文件并将它们发送到 Joe Evil Hacker 的服务器

这只是基本的安全。

在本地 html 文件中使用 XMLHttpRequest 加载 'server-side' 文件

Load a 'server-side' file with XMLHttpRequest in local html file

html

javascript

xmlhttprequest

filereader