在本地 html 文件中使用 XMLHttpRequest 加载“服务器端”文件答案

【问题标题】：Load a 'server-side' file with XMLHttpRequest in local html file在本地 html 文件中使用 XMLHttpRequest 加载“服务器端”文件
【发布时间】：2016-04-11 22:05:58
【问题描述】：

我想在我的 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 事件只触发一次，status=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> 标签的图像。 ..那么为什么加载文本文件这么难？

【问题讨论】：

标签： javascript html xmlhttprequest filereader

【解决方案1】：

如何在没有用户交互的情况下读取文件？

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

我可以毫无问题地从同一个子文件夹加载并显示带有<img>标签的图像

向用户显示图像与将文件内容提供给页面作者编写的 JavaScript 代码之间存在很大差异。

那么为什么加载文本文件这么难呢？

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

这只是基本的安全性。

【讨论】：

感谢昆汀的回答。我的主要问题（从一开始）是我相信浏览器可以将 html 文件的文件夹和子文件夹视为“本地服务器”，即绕过其安全检查。我现在看到黑客告诉任何人“只需将此文件放在您的桌面上并运行它”是多么容易...... :)
我将其标记为答案，但我想提一下，无论如何我认为这是一个问题，现在在 html+javascript 中制作可下载的“应用程序”非常困难......跨度>

【解决方案2】：

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

【讨论】：

谢谢。 URL.createObjectURL(file) 期望文件是一个文件对象，但我只有一个文件路径。有没有办法按照您的建议创建一个 File 对象并将其提供给 createObjectURL() ？（我试过这个：var file = File(fileName); 但它给出了一个例外。）