使用 javascript 从 localhost 打开文件答案

【问题标题】：Open file from localhost with javascript使用 javascript 从 localhost 打开文件
【发布时间】：2013-07-09 13:12:28
【问题描述】：

我正在尝试在我的网站上添加图片上传器。我有一个带有 jcrop 的 javascript（脚本不是我的，我使用了在 Internet 上找到的那个）；该脚本从计算机中获取图像文件并对其进行裁剪并传递给 php。它首先将表单输出转换为 javascrip 文件。

var oFile = $('#image_file')[0].files[0];

这是脚本的关键行，其他所有内容均来自 oFile。我想通过添加网络链接让用户可以上传图片（我已经可以在本地主机上保存图像文件以发布链接）；如何使用 javascript 从我的本地主机打开图像并将其以与上一行中的 oFile 变量相同的格式放置，以便我的脚本可以使用它？

【问题讨论】：

标签： javascript uploader

【解决方案1】：

您可以在现代浏览器中使用binary Ajax 将资源作为文件获取：

var oReq = new XMLHttpRequest();
oReq.open("GET", fileURLGivenByUser, true);
oReq.responseType = "blob";

oReq.onload = function(oEvent) {
  var oFile = oReq.response;
  processTheFileSomehow(oFile);
};

oReq.send();

只要满足以下任一条件，这将起作用：

fileURLGivenByUser 与运行脚本的页面位于同一域中（例如，您的裁剪脚本在 foo.com 上运行，并且图像链接也在 foo.com 上），或者
李>
使用Access-Control-Allow-Origin: * CORS 响应标头提供目标图像资源（例如，您的裁剪脚本在foo.com 上运行，图像链接在bar.com 上，bar.com 提供可接受的文件CORS 标头）

因此，为了让您的用户使用 localhost 链接，用户必须运行本地 Web 服务器，并且该 Web 服务器必须使用 Access-Control-Allow-Origin: * 或 Access-Control-Allow-Origin: whateverdomainyouuse.com 提供其图像（即，无论您的裁剪脚本的域是什么运行）。

如果 CORS 限制过于严格（可能是），您可以在主机上使用 server-side proxy。例如，当您请求时

http://mydomain.com/proxy/http://targetdomain.com/image.png

服务器使用

的内容进行请求和响应

http://targetdomain.com/image.png

【讨论】：