通過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

以上。