Question

我正在寻找一个HTML 5 AJAX库/框架，供用户将文件直接上传到Amazon S3。目标是避免将附件上传到Web服务器（因为Web服务器在将其传输到Amazon时会阻止）。我的理解是，这应该可以使用XDomainRequest，但我无法弄清楚如何。

我正在运行ruby-on-rails并希望为上传的文件分配一个临时名称（使用UUID），该名称将被发布回Web服务器，以便稍后可以重命名该文件并与paperclip集成。

有什么想法吗？这是jQuery可以处理的吗？ Flash不是此项目的选项。谢谢！

修改

我设法获得了一个基本的职位，但仍然有问题。我不确定需要什么标头，或者如何在请求中编码Amazon所需的参数（我可以将它们放在请求标头中吗？）。以下是我迄今取得的进展：

const XMLHTTPFactories = [
  function () { return new XDomainRequest(); },
  function () { return new XMLHttpRequest(); },
  function () { return new ActiveXObject("Msxml2.XMLHTTP"); },
  function () { return new ActiveXObject("Msxml3.XMLHTTP"); },
  function () { return new ActiveXObject("Microsoft.XMLHTTP"); },
];

var xhr = null;

for (var i = 0; i < XMLHttpFactories.length; i++) {
    try { xhr = XMLHttpFactories[i](); break; } catch (exception) { continue; }
}

$(this).change(function () {

  for (var i = 0; i < this.files.length; i++) {
    var file = this.files[i];

    xhr.open(settings.method, settings.url, true);
    xhr.setRequestHeader("Cache-Control", "no-cache");
    xhr.setRequestHeader("Content-Type", "multipart/form-data");
    xhr.setRequestHeader("Access-Control-Allow-Origin", "*")
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.setRequestHeader("X-File-Name", file.fileName);
    xhr.setRequestHeader("X-File-Size", file.fileSize);

    xhr.send(file);
  }

修改

进一步更新后，我设法得到以下错误：

XMLHttpRequest无法加载 http://bucket.s3.amazonaws.com/。原点http://local.app是不允许的访问控制允许来源。

我上传了一个crossdomain.xml文件，允许从通配符（*）域进行访问。不确定如何继续...

修改

在做了更多调查之后，我开始认为可能无法对S3进行JavaScript POST。我是否需要在转移之前发布到EC2实例？我可能能够确保一个微型实例，但如果可能的话我宁愿直接去S3！谢谢！

修改

我在亚马逊论坛上发布了这个问题，但没有收到任何反馈。对于交叉引用，可以在此处找到其他帖子：https://forums.aws.amazon.com/message.jspa?messageID=206650#206650。

Answer 1

您需要将另一方问题an Access-Control-Allow-Origin header。在你的情况下，另一边是Amazon S3服务器。除非他们在该标题中提及您的域名，否则您将无法向他们提出任何跨站点请求。

Amazon S3 now supports Cross Origin Resource Sharing您可以通过向存储桶添加一个或多个CORS规则来配置任何S3存储桶以进行跨域访问。每个规则都可以指定一个应该有权访问您的存储桶的域和一组您希望允许的HTTP谓词。

Answer 2

今天亚马逊宣布完全支持Amazon S3中的跨源资源共享（CORS）。您现在可以轻松构建使用JavaScript和HTML5与Amazon S3中的资源进行交互的Web应用程序，使您能够实施HTML5拖放上传到Amazon S3，显示上载进度或更新内容。

Answer 3

~~这意味着您必须在JavaScript中公开您的S3凭据。你不希望这样。~~

~~<击>~~

~~最好的解决方案是使用Paperclip。是的，您必须先上传到您的服务器，但至少要安全。~~

没关系，检查评论。

Answer 4

S3可以托管带有jquery的html页面没问题。存储桶成为服务器URL。如果您使用S3 Bucket Explorer之类的工具，只需点击一下即可获得存储桶中任何HTML页面的URL。

然后，您只需在XMLHttpRequest中使用PUT命令即可上传文件。

这基本上是JQuery-HTML5-Upload插件适用于Amazon S3的方式（参见他们的问题＃12）。

事实上，您可以通过将其插入变量然后将其与XMLHttpRequest open（）方法结合使用来试验Amazon S3 REST API语法。

多元宇宙中的和平。

Answer 5

亚马逊最终添加了对跨源资源共享（CORS）的支持，允许这样做：

http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource-sharing.html

Answer 6

没试过自己，但他们似乎在jquery-html5-upload插件中有这个工作

http://code.google.com/p/jquery-html5-upload/issues/detail?id=12

Answer 7

有一个名为s3_drect_upload的好的铁轨宝石可以完全满足您的需求。这是一个html5 / javascript上传器，支持重命名文件。

HTML 5 Amazon S3 Direct上传器

7 个答案: