前言

对于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 ) {
    // ...
}