HTML5 Amazon S3 直接上传答案

【问题标题】：HTML 5 Amazon S3 Direct UploaderHTML5 Amazon S3 直接上传
【发布时间】：2011-05-12 12:45:04
【问题描述】：

我正在寻找一个 HTML 5 AJAX 库/框架供用户将文件直接上传到 Amazon S3。目标是避免将附件上传到网络服务器（因为网络服务器在将它们传输到亚马逊时会阻塞）。我的理解是，这应该可以使用XDomainRequest，但我不知道怎么做。

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

有什么想法吗？这是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 文件，该文件允许从通配符 (*) 域进行访问。不知道如何继续...

编辑：

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

编辑：

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

【问题讨论】：

标签： ruby-on-rails html file-upload amazon-s3 amazon-ec2

【解决方案1】：

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

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

【讨论】：

感谢您的回复！您是否知道我是否可以在 Amazon S3 上设置响应 Access-Control-Allow-Origin 标头？
@Kevin 我一直在研究这个。 Amazon S3 不支持在存储桶或对象上设置此标头。有关更多信息，请查看此thread。根据他们（缺乏）的回应，亚马逊似乎对未来支持它的兴趣为零。
@Dan 谢谢。我实际上是那个帖子上的“海报”并且已经放弃了希望。
CORS 现在可以在 S3 上使用（请求后 3.5 年！）

【解决方案2】：

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

【讨论】：

【解决方案3】：

~~这意味着您必须在 JavaScript 中公开您的 S3 凭据。你不想要那个。~~

最好的解决方案是使用回形针。是的，您必须先上传到您的服务器，但至少它是安全的。

没关系，检查 cmets。

【讨论】：

不，你没有。 Amazon 支持结合到期令牌对密钥进行 HMAC SHA-2 编码。他们允许通过常规帖子直接上传 (doc.s3.amazonaws.com/proposals/post.html) 我只需要它是 AJAX。
太棒了。不知道这个！
是的，仍然不确定如何修复我的错误 Ariejan。还有人知道吗？见上面的帖子！

【解决方案4】：

S3可以用jquery托管html页面没问题。存储桶成为服务器 URL。如果您使用 S3 Bucket Explorer 之类的工具，您可以一键获取存储桶中任何 HTML 页面的 URL。

然后您可以简单地在 XMLHttpRequest 中使用 PUT 命令来上传文件。

这本质上就是 JQuery-HTML5-Upload 插件在 Amazon S3 上的工作方式（参见他们的问题 #12）。

事实上，您可以尝试使用 Amazon S3 REST API 语法，只需将其插入变量，然后将其与 XMLHttpRequest open() 方法结合使用。

多元宇宙中的和平。

【讨论】：

【解决方案5】：

亚马逊终于增加了对跨域资源共享 (CORS) 的支持，从而实现了这一点：

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

【讨论】：

【解决方案6】：

我自己没试过，但他们似乎在 jquery-html5-upload 插件中可以做到这一点

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

【讨论】：

【解决方案7】：

有一个名为s3_drect_upload 的优秀rails gem，它可以满足您开箱即用的需求。它是一个支持重命名文件的 html5/javascript 上传器。

【讨论】：