javascript - 通过iframe上传Amazon S3

Question

igh，我们又回到了这一点。我可以在任何足够不错的浏览器上轻松使用CORS，直接将文件上传到我的AWS S3存储桶。但是(即将到来)，对于IE，我不得不退回到iframe。轻松，设置一个隐藏的iframe，创建一个表单，将其目标设置为iframe名称/id，然后提交表单。如果上传成功，则将iframe重定向到我指定的网址，然后我就可以访问所需的内容。但是，如果发生错误，由于Iframe现在位于AWS域上，因此我将无法访问该错误的XML内容。实际上，我什至不知道发生了错误。

我在互联网上见过一些勇敢的人谈论托管html文件，将文件上传到同一存储桶中，然后使用postMessages路由iframe内容或类似内容。

有人可以向我解释如何实现这个神话般的解决方案吗？ Blueimp的jQuery文件上载器似乎可以解决此问题，但是天哪，该代码是如此jQuery化，以至于我无法掌握其要点。

编辑清晰

IE <10没有FileReader API。

由于1，我无法使用XDomainRequest将文件发送到S3

因此，请使用iframe并将其以及完整的表格发布到S3

如果成功，则AWS重定向到服务器上的页面，该页面读取 header 和
然后返回JSONP样式响应，客户端上的脚本可以读取该响应(重定向页面可以
由我指定)。

如果出错，我现在所能做的就是等待超时过期，然后控制台日志
IFRAME ID，然后弹出警报，以便用户可以按ID查询iframe，
读取DAMN XML内容，找出AWS指定的错误，然后重试(我很讽刺。)

Answer 1

关于iframe上传jQuery File Upload插件的方式，您几乎需要了解的所有内容都在其Iframe Transport plugin(以及支持的result.html页面)中。

作为介绍，您可能需要阅读其Cross domain uploads Wiki页面上的用户说明，特别是跨站点iframe传输上载部分。 (请注意，根据他们的Browser support页面，IE <10不支持诸如上载进度之类的功能，因此，至少在没有很大努力的情况下，我不会考虑使用iframe传输实现这些功能。)

(此外，我不认为任何使用File Upload插件的S3上传实现都可以访问文件上传错误的XML内容)

Iframe Transport插件为jQuery添加了新的Ajax“transport”方法，并且不特定于File Upload插件。您可能需要阅读jQuery.ajaxTransport()的文档，以了解jQuery提供的用于添加新传输的API。

我将尝试总结Iframe Transport插件的功能以及它与将文件上传到Amazon S3的关系:

触发文件上传时，将调用send()函数。该功能:

创建一个隐藏的表单元素

使用src="javascript:false;"创建一个iframe元素，并将load事件处理程序绑定(bind)到iframe

将iframe附加到隐藏的表单，并将隐藏的表单附加到文档。

创建iframe并加载其“页面”时，将调用其load事件处理程序。处理程序:

从iframe中清除自身，并绑定(bind)另一个load事件处理程序

配置隐藏的形式:

表单的action将是S3存储桶

的URL

表单的target设置为iframe，以便将服务器响应加载到iframe

中

其他字段，例如AWSAccessKeyId，被添加。具体来说，success_action_redirect设置为服务器上result.html的网址，例如http://example.org/result.html?%s。

通常，应使用服务器端代码将%s token 替换为上载结果，但是对于S3，可以使用您的代码将其用成功值硬编码，因为只有在上载成功的情况下Amazon才会重定向到该URL。

将原始表单中的文件输入字段移到隐藏表单中，并将克隆的字段保留在原始字段的位置

提交隐藏的形式

将文件输入字段移回原始格式，替换克隆的字段

文件已上传到S3。如果成功，Amazon会将iframe重定向到success_action_redirect URL。如果未成功，则Amazon返回错误，该错误也将加载到iframe中。

调用iframe的load事件处理程序。处理程序:

尝试保存对iframe的document对象的引用。如果文件上传失败，则处理程序将改为保存undefined。

使用成功代码和对iframe的document对象(或undefined)的引用来调用完整的回调

删除隐藏的表单(和iframe)

在将控制权返回给代码之前，根据所需的数据类型，将iframe的document对象传递到转换器(位于Iframe Transport plugin的底部)。转换器从document对象中提取该数据，然后将其(如果文件上传失败，则返回undefined)到您的回调中。

会调用您的回调(传递给jQuery.ajax()的success和/或complete)。插件始终返回成功代码，因此不会触发任何error回调。

如果传递给您的回调的数据是您包含在success_action_redirect中的值，则文件上传成功。如果数据是undefined，则文件上传失败。

更新:如果错误XML页面与S3存储桶位于同一原点，则来自S3存储桶的另一页面(已加载到另一个iframe)可以访问原始iframe的内容(因为它们来自同一原点)。您的主页可以使用postMessage()(或easyXDM的FlashTransport，如果需要支持IE6/7)与此第二个iframe通信。