用于Internet Explorer的后备AJAX文件上传

Question

I have implemented an AJAX file uploader in HTML5 using xHR2 and File api for an internal project. We were only required to support Firefox/Safari/Chrome. I used the following links as a reference

1. http://www.html5rocks.com/en/tutorials/file/xhr2/
2. http://www.html5rocks.com/en/tutorials/dnd/basics/
3. https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Now I am required to support Internet Explorer 10 and below. IE 10 supports XHR2 but File API support is lacking . Is there a way to detect that these APIs are not supported? If I can detect that the APIs are not supported, then how do I implement AJAX file upload for IE?

I am using Google Closure JS library not jQuery or any other library. The choice of library cannot be changed. Please use jQuery or some ones to that effect in the response. However, any code snippets that use jQuery are perfectly alright.

Answer 1

probably the easiest way to detect if the File API exists is to

typeof File

In a browser that supports the File API it should return an object or function - Internet Explorer returns undefined

as far as how to fallback and make it work for all users

I've used this tool https://github.com/valums/ajax-upload that creates an iframe and posts the upload to the iframe and emulates an AJAX file upload - its all pure javascript no libraries required and supports all the way back to IE6

Answer 2

Recently I've been working on a file uploader to be used together with google closure library. I found the fine-uploader library a good start. It's not written with the closure library, but it provides me the basic guidelines: uses xhr to upload a file if supported, otherwise fallback to form post into a hidden iframe.

In my code, I implemented two classes: one uses a XMLHttpRequest to upload a file, and the other use goog.net.IframeIo 's sendFromForm method to upload a file.

Answer 3

Take a look at the goog.net.iframeIo class in the Google Closure Library. This will take a file input element from a form and post it to an iFrame, giving the equivalent of an AJAX experience, even if it isn't in an actual XHR.

Here's a link to Google's documentation on how to implement it:

https://code.google.com/p/closure-library/source/browse/closure/goog/net/iframeio.js#48