通过Ajax方式提交含有文件的表单

前言：我们通常使用form表单，通过submit来将form表单中含有的文件上传到服务器。通过这种方式页面将会刷新，但是我们有时需要不刷新页面来提交含有文件的表单，这时我们就会想到通过ajax的方式。但是，如何通过ajax来提交含有文件的表单呢？

---

Html代码：

<form id="uploadForm">
    回复内容：<input type="text" name="msg" />
    上传图片：<input type="file" name="file"/>
    <input type="button" value="确定" onclick="saveMsg()"/>
</form>

JS代码：

function saveMsg() {
    var formData = new FormData($("#uploadForm")[0]);
    $.ajax({
        async : false,
        cache : false,
        type : "post",
        data : formData,
        url : 'http://localhost:8080/ajaxupload',
        dataType : 'json',
        contentType: false, //必须
		processData: false, //必须
		success : function() {
            console.log('success');
        },
        error : function(arg1, arg2, arg3) {
            console.log(arg1 + "--" + arg2 + "--" + arg3);
        }
    });
}

这里使用了FormData对象，那FormData对象是什么呢？我们可以在mozilla的web开发者指南中看到FormData的详细使用方法。简单的说我们可以使用FormData,使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单".

在上面的js代码中，我们使用Jquery的ajax方法来提交数据。注意：我们应该使用较新的Jquery，老版本的可能不支持，同时必须设置contentType : false和processData : false。否则，jquery会报“Uncaught TypeError: Illegal invocation”这样的错误。因为jquery会试图将不是字符串的内容进行转换，设置processData : false禁止其转换，设置contentType : false是告诉jquery不要为其设置Content-Type头，防止上传失败。参见：http://www.cainiaoer.com/2013/09/388.html

以上。