S3浏览器通过POST上传：无法优雅地处理错误

Question

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

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

1. 创建一个表单来执行上传，并将表单存储在 S3 本身上，与表单的“action”属性位于同一域中。
2. 将客户重定向到此表单。现在他们的浏览器位于 https://.s3.amazonaws.com/something。
3. 该页面包含一个隐藏的 iframe。该表单将其目标设置为 iframe。
4. load 事件处理程序查看 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 的文件上传器专为 S3 设计，为您提供 JavaScript 回调函数来处理错误、进度等。

Answer 2

这应该只是一条注释，但是您可以发布响应 XML 代码吗？

编辑：为了缩小范围，我做了一个简单的测试并且工作得很好：

<div id="foo">
    <error> 
        <code>AccessDenied</code>
        <message>Invalid according to Policy: Policy expired.</message> 
        <hostid> SZuQn5hTyf32j79AWUym1/si48oqjPifrx4goDVDLYYxc6cJVbbHroLJYcAM89+T</hostid> 
    </error> 
</div>

然后我在我的 firebug 上做了一些 jQuery 代码：

$("#foo").find("message").text()

也许你可以给出一个 alert($("#foo").html() ) 并检查响应..

Answer 3

我认为您正在尝试解决错误的问题。问题不在于 iframe 等细节问题，而在于您希望对上传进行更精细的控制。将文件上传到您的服务器，然后向亚马逊服务器提交请求，您将完全控制正在发生的事情。

当然，要复杂得多，但这就是控制的代价。