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

Question

我已经针对内部项目使用xHR2和File api在HTML5中实现了AJAX文件上传器。 我们只需要支持Firefox / Safari / Chrome。 我使用以下链接作为参考

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

现在，我需要支持Internet Explorer 10及更低版本。 IE 10支持XHR2，但缺少文件API支持。 有没有办法检测不支持这些API？ 如果可以检测到不支持这些API，那么如何实现IE的AJAX文件上传？

我正在使用Google Closure JS库而不是jQuery或任何其他库。 库的选择无法更改。 请在响应中使用jQuery或其他实现该效果的工具。 但是，使用jQuery的任何代码段都可以。

Answer 1

检测File API是否存在的最简单方法可能是

typeof File

在支持File API的浏览器中，它应该返回一个对象或函数-Internet Explorer返回undefined

关于如何回退并使其适用于所有用户

我使用了此工具https://github.com/valums/ajax-upload ，该工具创建了一个iframe，并将上传内容发布到iframe中，并模拟了AJAX文件上传-其所有纯javascript不需要库，并且一直支持到IE6

Answer 2

最近，我一直在致力于与Google闭包库一起使用的文件上传器。 我发现优良上传器库是一个好的开始。 它不是用闭包库编写的，但是它为我提供了基本准则：使用xhr上载文件（如果支持），否则使用后备表单将其发布到隐藏的iframe中。

在我的代码中，我实现了两个类：一个使用XMLHttpRequest上传文件，另一个使用goog.net.IframeIo的sendFromForm方法上传文件。

Answer 3

看看Google Closure库中的goog.net.iframeIo类。 这将从表单中获取文件输入元素，并将其发布到iFrame，即使在实际的XHR中也不会有AJAX体验。

以下是有关如何实现Google文档的链接：

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