IE 8/9 中 FormData 的后备答案

【问题标题】：Fallback for FormData in IE 8/9IE 8/9 中 FormData 的后备
【发布时间】：2012-06-01 14:45:43
【问题描述】：

FormData 在 IE 8/9 中不存在，但我需要这些浏览器中的该功能。有一个很好的后备方案吗？

我会尝试通过 json 数据发送，但我需要将文件传递给服务器。我将此文件附加到现代浏览器中的formData 并提交XHR 请求。因为FormData 在 IE 8/9 中不存在，所以这显然失败了。

// I cant seem to get this to work with a file.
$.ajax({
    url: '/genericHandlers/UploadDocsFile.ashx',
    type: "POST",
    data: model.toJSON(),
    contentType: 'application/json'
    }).done(function  (data) { 
       log('stuff happened!');
    });

也许另一种方法是在 js 中创建一个假表单对象，然后将数据附加到该对象上？

【问题讨论】：

希望为 window.FormData 方法添加一个 polyfill。
然后我给你一个新的 FormData polyfill 不幸的是仍然依赖于构建 blob... 也许你也可以使用它：Blob.js。要读取文件，您需要闪存

标签： javascript ajax xmlhttprequest fileapi

【解决方案1】：

我只知道一种可能的解决方案，但这并不是 IE 真正的 1-1 后备方案。没有用于发送文件的通信 API，因为您无法在旧浏览器中绑定输入字段，例如在使用 FormData 的现代浏览器中。但是您可以使用 iframe 发送整个表单。对于这种情况，您可以使用支持 XHR DataForm 和 iframe 的 jquery.form 插件（当浏览器不支持 FormData API 时使用 iframe 发送数据）。

【讨论】：

【解决方案2】：

您可以使用 XMLHttpRequests 手动发送文件，here 上有很多信息。

您可以先测试浏览器是否可以使用FormData 对象：

if(typeof FormData !== 'undefined')
   ...

MDN 有一个this function，您可以修改它以作为后备：

var XHR = new XMLHttpRequest();
var urlEncodedData = "";
var urlEncodedDataPairs = [];
var name;

// We turn the data object into an array of URL encoded key value pairs.
for(name in data) {
  urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
}

// We combine the pairs into a single string and replace all encoded spaces to 
// the plus character to match the behaviour of the web browser form submit.
urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');

【讨论】：

@Karson 真的吗？根据en.wikipedia.org/wiki/XMLHttpRequest#History_and_support，Microsoft 在 2006 年 10 月发布的 Internet Explorer 7.0 的脚本语言中添加了 XMLHttpRequest 对象标识符。
如果你真的想要的话，这个概念也可以应用到带有 ActiveXObjects 的 IE 5&6

【解决方案3】：

此答案并未严格解决您提出的问题，因此我了解 Mods 是否会删除它。

但是，您的问题与我正在研究的一个问题密切相关，即如何通过 FormData() 提供拖放上传，并为旧版浏览器提供优雅降级？

有一个很棒的库，叫做dropzone.js，它为我的问题提供了一个完美的解决方案。也许最好的部分是该库提供了开箱即用的优雅降级以支持旧浏览器上的文件上传，as detailed here。

转述来源：

幸运的是，如果不支持浏览器，dropzone.js 库会显示一个可自定义的后备类，其中包含一个输入字段和一个提交按钮。

我希望这些信息可以帮助像我一样正在寻找一种易于实施且优雅的文件上传解决方案的人。

【讨论】：