接著上一篇ajax系列之用jQuery的ajax方法向服務(wù)器發(fā)出get和post請求寫，這篇主要寫如何利用ajax和FormData實現(xiàn)頁面無刷新的文件上傳效果，主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。關(guān)于FormData，大家可以看MDN文檔。

1，先看效果圖

期望的功能和效果很簡單：點擊頁面中的上傳文件表單控件，選擇文件后點擊“ajax提交”，將文件上傳至服務(wù)器，上傳成功后，頁面給出一個簡單的提示。

2，前端的代碼

看下html代碼：

1 <div class="box">2 <div>3 <div class="item">4 <input type="file" name="myfile" style="font-size: 0.7rem;">5 </div>6 <div class="item">7 <button type="button" style="display: block; padding: 4px 18px;" class="btn-default">ajax提交</button>8 </div>9 <div class="item"> 10 <button type="submit" style="display: block; padding: 4px 18px;" class="btn-default">form提交</button> 11 </div> 12 </div> 13 <div class="prompt" style="font-size: 0.7rem;"></div> 14 </div> 15 <script src="../../js/jquery-3.1.0.min.js"></script> 16 <script src="upload01.js"></script>

代碼很簡單，需要注意的是頁面中沒有用到form表單，那么怎么提交數(shù)據(jù)呢，答案是用FormData來模擬表單中的?<input?type="file"name="myfile">?控件。另外，頁面中的樣式?jīng)]有寫出來。下面來看下html中引入的upload01.js代碼，這個是重點。

upload01.js代碼：

1 $(function($) {2 $('input[name=myfile]').on('change', function(e) {3 $('button[type=button]').on('click', function(e) {4 var formData = new FormData();5 // formData.ppend(name, element);6 formData.append('myfile', $('input[name=myfile]')[0].files[0]);7 $.ajax({8 url: 'upload01.php',9 method: 'POST', 10 data: formData, 11 contentType: false, // 注意這里應(yīng)設(shè)為false 12 processData: false, 13 cache: false, 14 success: function(data) { 15 if (JSON.parse(data).result == 1) { 16 $('.prompt').html(`文件${JSON.parse(data).filename}已上傳成功`); 17 } 18 }, 19 error: function (jqXHR) { 20 console.log(JSON.stringify(jqXHR)); 21 } 22 }) 23 .done(function(data) { 24 console.log('done'); 25 }) 26 .fail(function(data) { 27 console.log('fail'); 28 }) 29 .always(function(data) { 30 console.log('always'); 31 }); 32 }); 33 }); 34 });

?

(1) 下面解釋下FormData，涉及到了代碼的第4、6、10行。

第4行?var?formData =?new?FormData();?實例化了一個空的FormData對象，可以認(rèn)為它就是一個form表單，但現(xiàn)在里面什么控件都沒有。

第6行?formData.append('myfile', $('input[name=myfile]')[0].files[0]);?，給實例化的formdata對象添加一個控件，注意這里添加的是已有控件?<input type="file" name="myfile" style="font-size: 0.7rem;">?（見html代碼第4行）。

FormData.append(name, value, filename)方法可以很方便的以“鍵-值”對的形式給FormData添加控件，注意第3個參數(shù)“上傳文名”是可選的，它的具體語法和用法見FormData。

第10行，將實例化的formData作為jQuery.ajax()方法data參數(shù)的值傳遞進(jìn)去，提交給后端服務(wù)器。

(2) 再解釋下ajax()方法中的contentType、processData參數(shù)。

contentType參數(shù)，發(fā)起http請求時設(shè)置的請求頭中的contentType。jQuery.ajax()默認(rèn)的值為：'application/x-www-form-urlencoded; charset=UTF-8'，這個在大多數(shù)情況下都是適用的。

但經(jīng)過測試，保持默認(rèn)時會報錯，因為發(fā)送的數(shù)據(jù)中有input type="file"(上傳文件)，那么這時contentType應(yīng)該設(shè)置為'multipart/form-data'，但如果指定為這個類型服務(wù)端（php）就會報這個錯誤：?Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0?。具體原因現(xiàn)在還不清楚，所以這里先將contentType設(shè)置為false，即不讓jQuery設(shè)置contentType。

processData參數(shù)，根據(jù)jQuery.ajax()文檔中的解釋，默認(rèn)情況下，jQuery會處理發(fā)送的數(shù)據(jù)，將數(shù)據(jù)按照'application/x-www-form-urlencoded'的要求轉(zhuǎn)換為查詢字符串，如果要發(fā)送的數(shù)據(jù)是DOMDocument或者不需要處理，就可以設(shè)置為false不讓jQuery轉(zhuǎn)換數(shù)據(jù)，我們這里要發(fā)送的數(shù)據(jù)其實就是DOMDocument。

經(jīng)過測試，如果保持默認(rèn)(true)的話，在發(fā)起請求前js會報錯：?TypeError: 'append' called on an object that does not implement interface FormData.?

另外還有個dataType參數(shù)，期望從服務(wù)器中返回的數(shù)據(jù)格式，這里最好也不要指定，而是讓jquery自己根據(jù)http響應(yīng)頭中的contentType判斷，然后返回一個合適的數(shù)據(jù)類型。指定后不會影響后臺程序的邏輯處理，但你在前端接收的數(shù)據(jù)很可能不是期望的數(shù)據(jù)，于是js就會報這一類錯誤：?SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data?，這個是將dataType指定為json后報的錯誤。

3，后端的php代碼

后端服務(wù)器是nginx，用php來處理發(fā)送過來的數(shù)據(jù)，代碼也很簡單：

?

1 <?php2 // var_dump($_REQUEST); // 為空數(shù)組3 // var_dump($_FILES); //不為空4 5 // 當(dāng)使用FormData配合ajax上傳文件時，$_REQUEST、$_POST都是null，php://input也是null6 if (isset($_FILES) && !empty($_FILES)) {7 if (move_uploaded_file($_FILES['myfile']['tmp_name'], $_FILES['myfile']['name'])) {8 echo '{"result": 1, "filename": "' . $_FILES['myfile']['name'] . '"}';9 } else { 10 echo '{"result": 0}'; 11 } 12 }

?

代碼的邏輯很簡單這里就不多解釋了。主要說下我在調(diào)試程序時遇到的問題，遇到的問題總結(jié)起來就一句話：當(dāng)使用FormData配合ajax上傳文件時，$_REQUEST、$_POST都是空數(shù)組，php://input也是null。可以看到，我在代碼中的第2、3、5行也寫了相關(guān)的注釋。為什么$_REQUEST會是空呢？我查了些資料，但沒找到原因，以后再找原因吧。

?

參考資料：

jQuery.ajax()

FormData

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的基于jQuery的ajax系列之用FormData实现页面无刷新上传的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。