文本表單和圖片一起進行ajax提交，表單是值，圖片是對象，發送時有些問題

代碼如下：

                                    標題                        內容                        圖片                        submit// 用到了localResizeIMG外掛程式，壓縮圖片: https://github.com/think2011/localResizeIMG

樣本中，有兩個文本表單，另外還有一張圖片，一起提交到後台，
因為普通提交不能壓縮圖片，所以用js在前端壓縮後，用ajax一起提交到後台，
提交過程中問題如下：
主要跟這兩項相關:

processData: false,contentType: false,

1、如果讓這兩項生效，Request payload顯示為：[object Object],ajax請求能成功發送，但jquery拿不到表單的值。

2、如果注釋掉這兩項，Google瀏覽器控制台報錯：Uncaught TypeError: Illegal invocation，ajax請求不能發送。

不知怎麼弄

回複內容：

代碼如下：

                                    標題                        內容                        圖片                        submit// 用到了localResizeIMG外掛程式，壓縮圖片: https://github.com/think2011/localResizeIMG

樣本中，有兩個文本表單，另外還有一張圖片，一起提交到後台，
因為普通提交不能壓縮圖片，所以用js在前端壓縮後，用ajax一起提交到後台，
提交過程中問題如下：
主要跟這兩項相關:

processData: false,contentType: false,

1、如果讓這兩項生效，Request payload顯示為：[object Object],ajax請求能成功發送，但jquery拿不到表單的值。

2、如果注釋掉這兩項，Google瀏覽器控制台報錯：Uncaught TypeError: Illegal invocation，ajax請求不能發送。

不知怎麼弄

看了以下，這個外掛程式是利用了FormData對象來傳送檔案的，所以你用jQuery.ajax()發送的資料的data屬性必須是FormData對象，不能把FormData對象再作為data屬性的子屬性。

$.ajax({    type: "POST",    url: "{{ url('article/') }}",    dataType: 'json',    processData: false,    contentType: false,      cache: false,    data: {        title: $("#title").val(),        content: $("#content").val(),        photo: formData    //這裡錯了，不能把FormData對象作為data屬性的子屬性    }})

應該是這樣才對：

$.ajax({    type: "POST",    url: "{{ url('article/') }}",    dataType: 'json',    processData: false,    contentType: false,      cache: false,    data: formData    //直接把formData對象作為data屬性的值發送})

如果你要附加欄位，可以用FormData對象的append方法：

//這段代碼要在ajax請求之前formData.append('title', $("#title").val());formData.append('content',$("#content").val());

如果你要想把圖片檔案的欄位名設定成photo，在localResizeIMG參數文檔力其實已經說明了，就是在你壓縮圖片的代碼那裡這樣修改：

lrz(this.files[0], {    width: 800,    fieldName: 'photo'    //把上傳圖片檔案的欄位設定為photo})

另外要注意，FormData對象在IE上只有版本10以上才支援，其他現代瀏覽器（Firefox、Chrome、Safari、MS Edge等）都沒問題。

