Question

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

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

这是脚本的关键行，其他一切都来自oFile。我想让用户通过添加网页链接来上传图片（我已经在localhost上创建了可能的保存图像文件，可以发布链接）;如何使用javascript从我的localhost打开图像，并将其放在与上面一行中的oFile变量相同的格式中，以便我的脚本可以使用它？

Answer 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上，{{ 1}}为文件提供可接受的CORS头文件

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

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

时

Access-Control-Allow-Origin: whateverdomainyouuse.com

服务器使用

的内容执行请求和响应

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

使用javascript从localhost打开文件

1 个答案: