使用Ajax請求傳遞form表單文件上傳數據

FormData的主要用途有兩個：
1、將form表單元素的name與value進行組合，實現表單數據的序列化，從而減少表單元素的拼接，提高工作效率。
2、異步上傳文件

使用一：

var formData = new FormData(); formData.append('photo', $('#file')[0].files[0]);

js文件：
$.post("upload",formData,function (data) {
   if(data){
    alert("提交成功");
   }
});

出現錯誤

 

 探究發現$.post方法無法滿足文件上傳

原因：

    1.$.post中contentType默認的值為：'application/x-www-form-urlencoded; charset=UTF-8，而文件上傳一個是multipart/form-data，但是請求內容不只是文件上傳。所有使用contentType:false
    2.$.post中processData參數默認的值為true，會轉數據格式，上傳不需要轉，所有使用processData: false
————————————————

使用二：
正確的代碼：

var formData = new FormData();
formData.append('photo', $('#file')[0].files[0]);
$.ajax({
                    type: "POST",
                    url:"upfile",
                    data:formData,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        if(data){
                            alert("上傳完成~~~");
                        }
                    }
                });
————————————————

總結： post()不是萬能的，雖然非常簡便，但是還是有一定的局限性，如果遇到需要復雜些的設置還是需要使用ajax()