jquery.iframe-transport.js

This jQuery plugin implements an <iframe>transport so that
$.ajax() calls support the uploading of files using standard HTML file
input fields. This is done by switching the exchange from XMLHttpRequest
to a hidden iframe element containing a form that is submitted.

Usage

To use this plugin, you simply add an iframe option with the value true
to the Ajax settings an $.ajax() call, and specify the file fields to
include in the submssion using the files option, which can be a selector,
jQuery object, or a list of DOM elements containing one or more
<input type="file"> elements:

Response Data Types

As the transport does not have access to the HTTP headers of the server
response, it is not as simple to make use of the automatic content type
detection provided by jQuery as with regular XHR. If you can’t set the
expected response data type (for example because it may vary depending on
the outcome of processing by the server), you will need to employ a
workaround on the server side: Send back an HTML document containing just a
<textarea> element with a data-type attribute that specifies the MIME
type, and put the actual payload in the textarea:

The iframe transport plugin will detect this and pass the value of the
data-type attribute on to jQuery as if it was the “Content-Type” response
header, thereby enabling the same kind of conversions that jQuery applies
to regular responses. For the example above you should get a Javascript
object as the data parameter of the complete callback, with the
properties ok: true and message: "Thanks so much".

Handling Server Errors

Another problem with using an iframe for file uploads is that it is
impossible for the javascript code to determine the HTTP status code of the
servers response. Effectively, all of the calls you make will look like they
are getting successful responses, and thus invoke the done() or
complete() callbacks. You can only communicate problems using the content
of the response payload. For example, consider using a JSON response such as
the following to indicate a problem with an uploaded file:

Compatibility

This plugin has primarily been tested on Safari 5 (or later), Firefox 4 (or
later), and Internet Explorer (all the way back to version 6). While I
haven’t found any issues with it so far, I’m fairly sure it still doesn’t
work around all the quirks in all different browsers. But the code is still
pretty simple overall, so you should be able to fix it and contribute a
patch :)

Remove “iframe” from the data types list so that further processing is
based on the content type returned by the server, without attempting an
(unsupported) conversion from “iframe” to the actual type.

If there is any additional data specified via the data option,
we add it as hidden fields to the form. This (currently) requires
the processData option to be set to false so that the data doesn’t
get serialized to a string.

Move the file fields into the hidden form, but first remember their
original locations in the document by replacing them with disabled
clones. This should also avoid introducing unwanted changes to the
page layout during submission.

The second load event gets fired when the response to the form
submission is received. The implementation detects whether the
actual payload is embedded in a <textarea> element, and
prepares the required conversions to be made in that case.