0

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

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

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

4

1 回答 1

0

您可以在现代浏览器中使用二进制 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: *or Access-Control-Allow-Origin: whateverdomainyouuse.com（即，您的裁剪脚本运行的任何域）为其图像提供服务。

如果 CORS 限制过于严格（可能是），您可以在主机上使用服务器端代理。例如，当您请求

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

服务器使用以下内容进行请求和响应

http://targetdomain.com/image.png
于 2013-07-09T13:31:10.273 回答