jquery - S3浏览器通过POST上传: unable to handle errors gracefully

Question

我正在编写一个应用程序，希望客户能够直接从浏览器上传到 Amazon S3。我可以把这个工作做得很好。但是当错误发生时，我希望能够更优雅地处理它们，而不是将 XML 文档散布在客户的屏幕上。

我有一个我认为可行的计划，但它失败了。这是我正在尝试的:

1. 创建一个表单来进行上传，并将该表单存储在 S3 本身上，与表单的“action”属性位于同一域中。
2. 将客户重定向到此表单。现在他们的浏览器位于 https://<bucket>.s3.amazonaws.com/something .
3. 该页面包含一个隐藏的 iframe。该表单将其目标设置为 iframe。
4. 加载事件处理程序查看 iframe 的内容并对其进行操作。

所以，像这样:

<iframe id="foo" name="foo" style="display: none" />
<form target="foo" action="https://<bucket>.s3.amazonaws.com/">
    <input type="hidden" name="..." value="..." />
    <input type="file" name="file" />
</form>

使用此 JavaScript(使用 jquery):

function handler() {
    var message = $("#foo").contents().find('message').text();
    alert(message);
}
$("#foo").load(handler);

使用 firebug，我可以看到 iframe 包含一个 XML 文档，其中包含一个“消息”节点。但是，.find('message') 始终无法在 XML 文档中找到任何内容。

请注意，表单的操作与文档本身具有相同的域、端口和方案。因此，我认为我不应该违反同源策略。正确的？但每次都失败。这是使用 Firefox 和 Google Chrome 浏览器。

感谢您的建议!

Answer 1

有许多 jQuery 插件可以有效地实现您想要做的事情。在 Google 上搜索“jQuery ajax-upload”，您可以直接使用这些控件之一来捕获帖子的结果或检查它们的代码并推出您自己的代码。

如果您要上传大文件，您可能还需要研究一些基于 Flash 的上传程序。纯形式的上传方法没有任何实现上传进度的方法，至少在Flash 确实提供的新文件功能在浏览器中广泛传播之前是这样。 http://github.com/slaskis/s3upload#readme是一款优秀的基于 Flash 的文件 uploader ，专门为 S3 设计，并为您提供 JavaScript 中的回调函数来处理错误、进度等。