通过Iframe上传Amazon S3

Question

叹了口气,我们回到了这一点.我可以轻松地在任何体面的浏览器上使用CORS直接将文件上传到我的AWS S3存储桶.但是(它即将到来),随着IE我不得不回到Iframes.轻松,设置一个隐藏的Iframe,创建一个表单,将其目标设置为Iframe name/id,提交表单.如果上传成功,Iframe将被重定向到我指定的网址,我可以访问我需要的任何内容.但是如果发生错误,由于Iframe现在位于AWS域上,我将无法访问错误的XML内容.事实上,我甚至不知道发生了错误.

我已经看到互联网上的勇敢的人谈论托管一个html文件,在要上传文件的同一个桶上,然后使用postMessages路由Iframe内容,或类似的东西.

有人可以向我解释如何实现这个神话般的解决方案吗？Blueimp的jQuery文件上传程序似乎解决了这个问题,但是上帝的代码是如此jQueryified,我无法得到它的要点.

编辑清晰

1. IE <10没有FileReader API.
2. 由于1,我无法使用XDomainRequest将文件发送到S3
3. 因此,使用iframe并将其与完整表单一起发布到S3
4. 如果成功,AWS会重定向到服务器上的页面,该页面会读取标题,
   然后返回JSONP样式响应,该响应可由客户端上的脚本读取(重定向页面可由
   我指定).
5. 如果出错,我现在所能做的就是等待超时到期,然后控制台记录
   一个IFRAME ID,然后弹出警报,以便用户可以按ID查询iframe,
   读取DAMN XML内容,图超出AWS指定的错误,然后重试(我是讽刺...)

Answer 1

几乎所有关于jQuery文件上传插件如何上传iframe上传的内容都在其iframe传输插件中(以及支持的result.html页面).

作为简介,您可能希望在其跨域上传维基页面上阅读其用户说明,特别是跨站点iframe传输上传部分.(请注意,根据他们的浏览器支持页面,IE <10不支持上传进度等细节,所以我不会考虑使用iframe传输,至少不需要付出很大的努力.)

(另外,我不相信任何使用文件上传插件的S3上传实现都可以访问文件上传错误的XML内容)

Iframe Transport插件为jQuery添加了一个新的Ajax"transport"方法,并不是特定于File Upload插件.您可能需要阅读jQuery.ajaxTransport()的文档,以了解jQuery为添加新传输提供的API.

我将尝试总结Iframe传输插件正在做什么,以及它如何与将文件上传到Amazon S3相关:

1. 触发文件上载时,将send()调用该函数.这个功能:

   • 创建隐藏的表单元素

   • 使用,创建iframe元素src="javascript:false;",并将load事件处理程序绑定到iframe

   • 将iframe附加到隐藏表单,并将隐藏表单附加到文档.

2. 创建iframe并加载其"页面"时,将load调用其事件处理程序.处理程序:

   • 从iframe中清除自己,并绑定另一个load事件处理程序

   • 配置隐藏的形式:

     • 表单action将是S3存储桶的URL

     • 表单target设置为iframe,以便在iframe中加载服务器响应

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

       通常,%s令牌应该由服务器端代码替换为上传结果,但是对于S3,可以使用代码对成功值进行硬编码,因为只有在上传成功后,Amazon才会重定向到此URL.

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

   • 提交隐藏的表单

   • 将文件输入字段移回原始表单,替换克隆的字段

3. 文件上传到S3.如果成功,Amazon会将iframe重定向到success_action_redirectURL.如果不成功,Amazon将返回错误,该错误也会加载到iframe中.

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

   • 尝试保存对iframe document对象的引用.如果文件上载失败,则处理程序会保存undefined.

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

   • 删除隐藏的表单(和iframe)

5. 在将控制权返回给您的代码之前,iframe的document对象将传递给转换器(位于Iframe传输插件的底部),具体取决于您期望的数据类型.转换器从document对象中提取该数据并将其返回(或者undefined如果文件上载失败)到您的回调.

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

   如果传递给回调的数据是您包含的值success_action_redirect,则文件上传成功.如果数据是undefined,则文件上载失败.

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