通过 JS 中的 XMLHttpRequest 对象发布表单数据？（跨浏览器）答案

【问题标题】：Post formdata via XMLHttpRequest object in JS ? ( cross browser)通过 JS 中的 XMLHttpRequest 对象发布表单数据？（跨浏览器）
【发布时间】：2012-01-07 09:16:11
【问题描述】：

我正在尝试在 js 中发布表单数据：

我有这个代码：

var formData = new FormData();
  formData.append("username", "Groucho");
  formData.append("accountnum", 123456);
  formData.append("afile", "2");

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://xxxxx/xx.ashx",true);
xhr.send(formData);

根据MDN 的表单数据在 IE 中不可用（或未知）。

当我在 FF 中尝试这个时：

（我觉得还可以……）。

当我在 IE 中尝试时：

什么是发布表单数据（或我的数据，但以客观方式）CROSSBROWSER 的解决方案？

【问题讨论】：

标签： javascript post cross-browser xmlhttprequest

【解决方案1】：

我编写了一个简单的包装器，您可以使用它在 IE 中发送 FormData（它也不会弄乱 webkit/gecko 中的任何内容）。在尝试使用 FormData 之前，只需包含以下 js：

var ieFormData = function ieFormData(){
if(window.FormData == undefined)
{
    this.processData = true;
    this.contentType = 'application/x-www-form-urlencoded';
    this.append = function(name, value) {
        this[name] = value == undefined ? "" : value;
        return true;
    }
}
else
{
    var formdata = new FormData();
    formdata.processData = false;
    formdata.contentType = false;
    return formdata;
}

}

现在只需将所有新的 FormData() 调用切换到新的 ieFormData()，然后切换

processData: false, 
contentType: false,

到

processData: formdata.processData,
contentType: formdata.contentType,
cache: false,

一切就绪。当然，这不允许你包含文件（你仍然需要 iframe hack），但它可以让你在 IE 中模仿 FormData。

【讨论】：

我有一个类似的问题，但我不确定如何解决这个问题，如果我的代码是 var postedFile = document.getElementById("file").files[0]; var formElement = document.getElementById("formID"); var form = new FormData(formElement); form.append('postedFile', postedFile); request.open("POST", "/Admin/SaveQuestion/", true); request.send(form);
贴出来的文件我也不太担心，我只是希望能够提交剩下的表单数据

【解决方案2】：

您没有说明您使用的是哪个版本的 IE。 IE9 或更低版本不支持 formData 对象。 IE10 应该支持 XMLHTTPRequest2（包含 formData 对象）(http://caniuse.com/xhr2)

现在跨浏览器 AJAX 文件上传非常困难。您可以尝试在 Javascript 中构建自己的表单标题/边界（请参阅此处的答案：XMLHttpRequest POST multipart/form-data），但就个人而言，我认为这不值得。

【讨论】：