前言
对于XMLHttpRequest API大家都熟，它是ajax技术的根本。XMLHttpRequest的第一代不支持文件上传，所以，只实现了第一代的浏览器中无论怎样使用jQuery.ajax()也不可能上传文件。所以，讨论jQuery.ajax()的上传文件能力，默认基于第二代API。第二代XHR利用new FormData()来上传文件。
也就是说，只有jQuery.ajax() + 第二代XHR才可能实现文件上传。
有人说为啥不直接用原生JS，其实写起来比$.ajax()的行数还要少。但是原生JS肯定没办法用jq封装的then方法和其他一些方法，不要小看封装。
操作
先new一个FormData对象，然后向里面压入1个文件，然后用jQuery.ajax()方法上传这个FormData对象即可。
HTML：
<input type="file" id="myfile">
<button>upload</button>
JavaScript：
$('button').click(function() {
var formData = new FormData();
// 键名不一定是“file”，可以是任意名；写多行就可以压入多个文件，键名不可重名
formData.append('file',$('#myfile')[0].files[0]);
$.ajax({
url: '1.php',
type: 'POST',
data: formData,
cache: false,
processData: false, // 要求jQuery不处理发送的数据
contentType: false // 要求jQuery不设置Content-Type请求头
}).then(function(data) {
console.log(data);
});
});
所以，关键的知识点其实就两个，也就是要求jQuery不处理发送的数据和要求jQuery不设置Content-Type请求头。
要求jQuery不处理发送的数据是为了不让jQuery把文件处理成字符串
要求jQuery不设置Content-Type请求头是为了不让jQuery用默认的请求头
进阶
如果你的form表单是标准表单，你还可以有更简单的js写法：
var formData = new FormData();这句可以改成var formData = new FormData(document.getElementById('form1'));，也就是说，直接把form元素传给构造器就行了，剩下的事就不用管了，省去了所有的formData.append(...)，是不是更方便？
注意事项
最后强调，上述代码只在支持XHR 2的浏览器中才可以正常运行，不支持XHR 2的浏览器没有任何办法用XHR上传文件。判断浏览器是否支持XHR 2的最好办法是下面两种方法，其中第一种更严格，第二种方法执行速度更快。我建议使用第一种：
// 注意大小写
if ( window.hasOwnProperty('FormData') ) {
// ...
}
// 注意大小写
if ( 'FormData' in window ) {
// ...
}
