唉，我们又回到了这一点。我可以很轻松地使用在任何足够体面的浏览器CORS直接上传文件到我的AWS S3桶。但是，（有人来了），与IE浏览器我要回落到内部框架。很简单，建立一个隐藏的iframe，创建一个表单，将其目标iframe的名称/ ID，提交表单。如果上传成功，该IFRAME重定向到URL我指定我可以访问任何我需要。但是，如果发生错误，因为这个IFrame，现在一个AWS域，我不会有机会获得错误的XML内容。逸岸，我甚至不知道发生了一个错误。

我见过的勇敢的人们在网上谈论托管的HTML文件上，在同一个桶到哪些文件上传，然后用postMessages路由的iframe内容之类的，什么的。

可能有人请向我解释如何实现这个神话的解决方案？ jQuery的文件上传通过Blueimp似乎解决这​​个问题，但神code是如此jQueryified，我没有能够得到它的要点。

编辑为清楚起见

在IE小于10不具备的FileReader API 。 1因为，我不能使用XDomainRequest将文件发送到S3 在这样沿着使用iframe和后一个完整的形式S3 如果成功，AWS重定向到一个页面上的服务器，读取头和 然后返回一个JSONP样式响应，可以通过在客户机脚本被读取（重定向页面可以 由我指定）。 如果出现错误，我所能做的，现在是等待超时结束，然后控制台登录 一个IFRAME ID和弹出的警报，使得用户然后可以查询对的IFRAME按ID， 读这该死的XML内容，找出AWS指定的错误，然后重试（我是讽刺。） 解决方案

几乎所有你需要知道如何jQuery的文件上传插件不IFRAME上传是在其Iframe交通运输插件（连同支持 result.html 页面）。

作为引言，你可能需要阅读他们的跨域上传自己的用户指令 wiki页面，特别是在跨站点IFRAME交通上传部分。 （请注意，根据自己的浏览器支持页，不支持像上传进度细微IE浏览器＆LT; 10，所以我不会用iframe的交通，至少在没有显著精力考虑这些可能的）

（还有，我不使用文件上传插件访问一个文件上传错误的XML内容相信任何S3上传实现）

在iframe交通运输插件增加了一个新的Ajax运输的方法jQuery和不特定的文件上传插件。您可能需要阅读 jQuery.ajaxTransport（）的文档明白，jQuery提供增加一个新的运输API

我会试着总结一下该IFRAME传输的插件是干什么的，以及它如何与上传文件到Amazon S3：

在文件上传时触发，发送（）函数被调用。这个功能：

创建一个隐藏的表单元素

创建具有 iframe元素的src =JavaScript的：假的;，并绑定一个负荷事件处理程序的iframe

追加iframe来隐藏表单，并添加隐藏的表单文件。

在创建的iframe，并加载它的页，它的负荷事件处理程序被调用。处理程序：

从IFRAME清除本身，并结合其它负荷事件处理

配置隐藏的表单：

在窗体的动作将是URL的S3存储

在窗体的目标设置为iframe中，以使服务器响应在iframe装载

其他领域，例如 AWSAccessKeyId ，被添加。具体而言， success_action_redirect 设置为 result.html 您的服务器，例如在 http://example.org/result.html?%s 。

通常情况下，％S 标记应改为由服务器端code上传成绩，但与S3这可能是硬codeD与成功的价值由您的code，因为亚马逊将重定向到该网址仅当上载成功。

文件从原来的表单输入字段被移动到隐藏的形式，留在原来的领域'的地方克隆领域

提交隐藏的表单

将文件输入字段回原来的形式，取代了克隆领域

该文件（S）被上传到S3。如果成功的话，亚马逊重定向的iframe的 success_action_redirect URL。如果没有成功，亚马逊返回一个错误，其中也加载在iframe。

IFrame的负荷事件处理程序被调用。处理程序：

试图保存一个参考iframe的文件对象。如果文件上传失败，处理程序保存的未定义代替。

调用完成回调成功code和引用的iframe的文件对象（或未定义）

删除隐藏的表单（和iframe）

在控制返回到code，IFrame的文件对象传递给一个转换器（在的Iframe交通运输插件），这取决于什么类型的数据，您所期望的。该转换器提取从文件对象数据，并返回它（或未定义如果文件上传失败）到您的回调（S）。

您的回调（S）（成功和/或完整传递给的 jQuery.ajax（）的）被调用。一个成功的code总是由插件回来，所以任何错误回调不会被触发。

如果传递给你的回调（S）的数据就是你列入值 success_action_redirect ，然后将该文件上传成功。如果数据未定义，然后将该文件上传失败。

更新：如果错误XML页面停留在同一产地的S3存储，然后又在S3存储页面，加载到另一个iframe中，可以访问原来的iframe的内容（因为它们是从相同的起点）。你的主要页面可以用的postMessage（）本次iframe中使用（或 easyXDM 沟通的FlashTransport，如果你需要支持IE6 / 7）。

Sigh, we're back to this. I can easily enough use CORS on any decent enough browser to directly upload files to my AWS S3 bucket. But (it was coming), with IE I have to fall back to Iframes. Easy, set up a hidden Iframe, create a form, set its target to Iframe name/id, submit form. If the upload is successful, the Iframe is redirected to a url I specify and I can access the whatever I need to. But if an error occurs, since the Iframe is now on an AWS domain, I won't have access to the XML content of the error. Infact, I won't even know that an error has occurred.

I've seen brave people on the internet talking about hosting an html file, on the same bucket to which files are to be uploaded, and then using postMessages to route the Iframe content, or something of that sort.

Could someone please explain to me how to achieve this mythical solution? The jQuery file uploader by Blueimp seems to solve this, but by God the code is so jQueryified that I haven't been able to get the gist of it.

Editing for clarity

IE<10 does not have a FileReader API. Because of 1, I cannot use an XDomainRequest to send a file to S3 So use an Iframe and post that along with a complete form to S3 If successful, AWS redirects to a page on server, which reads the headers and then returns a JSONP style response that can be read by scripts on client (redirect page can be specified by me). If on error, all I can do right now is wait for a timeout to expire and then console log an IFRAME ID, and popup an alert so that the user can then query for the the iframe by ID, read the DAMN XML content, figure out the AWS specified error, and then retry (I'm being sarcastic..)

解决方案

Almost everything you need to know about how the jQuery File Upload plugin does iframe uploads is in its Iframe Transport plugin (along with supporting result.html page).

As an introduction, you may want to read their user instructions on their Cross domain uploads wiki page, specifically the Cross-site iframe transport uploads section. (Note that according to their Browser support page, niceties like upload progress are not supported for IE <10, so I wouldn't consider these possible using the iframe transport, at least without significant effort.)

(Also, I don't believe any S3 upload implementation using the File Upload plugin has access to the XML content of a file upload error)

The Iframe Transport plugin adds a new Ajax "transport" method for jQuery and is not specific to the File Upload plugin. You may want to read the documentation for jQuery.ajaxTransport() to understand the API that jQuery provides for adding a new transport.

I'll try to summarize what the Iframe Transport plugin is doing, and how it relates to uploading files to Amazon S3:

When a file upload is triggered, the send() function is called. This function:

Creates a hidden form element

Creates an iframe element with src="javascript:false;", and binds a load event handler to the iframe

Appends the iframe to the hidden form, and appends the hidden form to the document.

When the iframe is created and its "page" loaded, its load event handler is called. The handler:

Clears itself from the iframe, and binds another load event handler

Configures the hidden form:

The form's action will be the URL for the S3 bucket

The form's target is set to the iframe, so that the server response is loaded in the iframe

Other fields, e.g. AWSAccessKeyId, are added. Specifically, success_action_redirect is set to the URL of result.html on your server, e.g. http://example.org/result.html?%s.

Normally, the %s token should be replaced with the upload results by server-side code, but with S3 this can be hard-coded with a success value by your code, since Amazon will redirect to this URL only if the upload succeeded.

File input fields from the original form are moved into the hidden form, with cloned fields left in the original fields' place

Submits the hidden form

Moves the file input fields back into the original form, replacing the cloned fields

The file(s) are uploaded to S3. If successful, Amazon redirects the iframe to the success_action_redirect URL. If not successful, Amazon returns an error, which is also loaded in the iframe.

The iframe's load event handler is called. The handler:

Tries to save a reference to the iframe's document object. If the file upload failed, the handler saves an undefined instead.

Calls the complete callback with a success code and a reference to the iframe's document object (or undefined)

Removes the hidden form (and iframe)

Before control is returned to your code, the iframe's document object is passed to a converter (at the bottom of the Iframe Transport plugin), depending on what type of data you were expecting. The converter extracts that data from the document object and returns it (or undefined if the file upload failed) to your callback(s).

Your callback(s) (success and/or complete as passed to jQuery.ajax()) is called. A success code is always returned by the plugin, and so any error callback will not be triggered.

If the data passed to your callback(s) is the value you included in the success_action_redirect, then the file upload succeeded. If the data is undefined, then the file upload failed.

Update: If the error XML page stays on the same origin as the S3 bucket, then another page from the S3 bucket, loaded into another iframe, can access the original iframe's content (because they are from the same origin). Your main page can communicate with this second iframe using postMessage() (or easyXDM's FlashTransport, if you need to support IE6/7).