使用FormData进行Ajax上传文件

常用Ajax提交通过URL参数提交，提交方式“POST”,”GET”等，而如果需要通过Ajax提交文件则需要用到FormData。

FormData用法：

1、使用FormData实例化表单数据

//实例化表单
var form=document.getElementById('myForm');
var formData=new FormData(form);
//添加数据
formData.append('Athor','my name');

2、提交文件

var files=document.getElementById('upload');
var formData=new FormData();
for(var i = 0; i < files.length; i++) {
    formData.append('files', this.files[i]);
}

Ajax提交

//XMLHttpRequest方式
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if(xhr.readyStatus == 4 && xhr.status == '200') {
        console.log(xhr.responseText)
    }
}
xhr.open('POST', 'server.php')
xhr.send(fromData)

//jquery方式
$.ajax({
  url: "server.php",
  type: "POST",
  data: formData,
  processData: false,  // 告诉jQuery不要去处理发送的数据
  contentType: false   // 告诉jQuery不要去设置Content-Type请求头
});

由于 FormData 是 XMLHttpRequest Level 2 新增的接口，现在 低于IE10 的IE浏览器不支持 FormData ，至于 上面介绍的 FormData 对象的方法经过测试，在 IE 浏览器中都不支持，具体的各大浏览器的支持情况可以参照下图：

其它具体用法详见API用法：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData