HTML 5 Amazon S3 直接上传器

发布于 2024-10-03 03:52:31 字数 2214 浏览 1 评论 0 原文

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

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

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

编辑：

我成功地完成了基本的工作，但仍然遇到问题。我不太确定需要哪些标头，或者如何在请求中对亚马逊所需的参数进行编码（我可以将它们放在请求标头中吗？）。这是迄今为止我的进展：

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。

原文

I am looking for an HTML 5 AJAX library / framework for users to upload files directly to Amazon S3. The goal is to avoid uploading attachments to the web server (as the web server blocks when it transfer them to Amazon). My understanding is that this should be possible using XDomainRequest, but I can't figure out how.

I am running ruby-on-rails and wanted to assign the uploaded file a temporary name (using a UUID) that will be posted back to the web server so the file can later be renamed and integrated with paperclip.

Any ideas? Is this something jQuery can handle? Flash isn't an option for this project. Thanks!

Edit:

I managed to get a basic post working but am still have issues. I'm not exactly sure what headers are required, or how to encode the Amazon required parameters in the request (can I put them in the request header?). Here is my progress thus far:

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);
  }

Edit:

After further updates, I've managed to get the following error:

XMLHttpRequest cannot load
http://bucket.s3.amazonaws.com/.
Origin http://local.app is
not allowed by
Access-Control-Allow-Origin.

I've uploaded a crossdomain.xml file that allows access from the wildcard (*) domain. Not sure how to continue...

Edit:

After having done more investigation, I'm starting to think that the JavaScript POST might not be possible to S3. Will I be required to post to an EC2 instance before doing a transfer? I might be able to secure a micro instance, but I'd prefer to go direct to S3 if possible! Thanks!

Edit:

I posted the question on the Amazon Forums and haven't received any feedback. For cross references the other post can be found here: https://forums.aws.amazon.com/message.jspa?messageID=206650#206650.