5

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

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

  1. 创建一个表单来进行上传，并将表单存储在 S3 本身上，与表单的“action”属性在同一个域中。
  2. 将客户重定向到此表单。现在他们的浏览器位于https://<bucket>.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 浏览器。

感谢您的任何建议！

4

3 回答 3

2

这应该只是一个评论，但是您可以发布响应 XML 代码吗？

编辑：只是缩小一点，我做了一个简单的测试并且工作得很好：

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

然后我在我的萤火虫上做了一些 jQuery 代码：

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

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

于 2010-02-10T11:55:34.573 回答
2

有许多 jQuery 插件可以有效地实现您正在尝试做的事情。在 Google 上搜索“jQuery ajax-upload”，您可以使用其中一个开箱即用的控件来捕获帖子的结果，或者检查他们的代码并推出自己的代码。

如果您要上传大文件，您可能还想查看一些基于 Flash 的上传器。上传的纯表单方法没有任何实现上传进度的方法，至少在 Flash 提供的新文件功能在浏览器中广泛传播之前是这样。http://github.com/slaskis/s3upload#readme是一个很好的基于 Flash 的文件上传器，专为 S3 设计，并为您提供 JavaScript 中的回调函数来处理错误、进度等。

于 2010-05-14T15:18:16.927 回答
0

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

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

于 2010-03-15T20:29:34.853 回答