基於jQuery的ajax系列之用FormData實現頁面無重新整理上傳

標籤：https   copy   file   nginx   url   warning   rac   new   result   

接著上一篇ajax系列之用jQuery的ajax方法向伺服器發出get和post請求寫，這篇主要寫如何利用ajax和FormData實現頁面無重新整理的檔案上傳效果，主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData介面。關於FormData，大家可以看MDN文檔。

1，先看

期望的功能和效果很簡單：點擊頁面中的上傳檔案表單控制項，選擇檔案後點擊“ajax提交”，將檔案上傳至伺服器，上傳成功後，頁面給出一個簡單的提示。

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表單，那麼怎麼提交資料呢，答案是用FormData來類比表單中的 <input type="file"name="myfile"> 控制項。另外，頁面中的樣式沒有寫出來。下面來看下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, // 注意這裡應設為false12                 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對象，可以認為它就是一個form表單，但現在裡面什麼控制項都沒有。

第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個參數“上傳文名”是可選的，它的具體文法和用法見FormData。

第10行，將執行個體化的formData作為jQuery.ajax()方法data參數的值傳遞進去，提交給後端伺服器。

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

contentType參數，發起http請求時設定的要求標頭中的contentType。jQuery.ajax()預設的值為：‘application/x-www-form-urlencoded; charset=UTF-8‘，這個在大多數情況下都是適用的。

但經過測試，保持預設時會報錯，因為發送的資料中有input type="file"(上傳檔案)，那麼這時contentType應該設定為‘multipart/form-data‘，但如果指定為這個類型服務端（php）就會報這個錯誤： Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0 。具體原因現在還不清楚，所以這裡先將contentType設定為false，即不讓jQuery設定contentType。

processData參數，根據jQuery.ajax()文檔中的解釋，預設情況下，jQuery會處理髮送的資料，將資料按照‘application/x-www-form-urlencoded‘的要求轉換為查詢字串，如果要發送的資料是DOMDocument或者不需要處理，就可以設定為false不讓jQuery轉換資料，我們這裡要發送的資料其實就是DOMDocument。

經過測試，如果保持預設(true)的話，在發起請求前js會報錯： TypeError: ‘append‘ called on an object that does not implement interface FormData. 

另外還有個dataType參數，期望從伺服器中返回的資料格式，這裡最好也不要指定，而是讓jquery自己根據http回應標頭中的contentType判斷，然後返回一個合適的資料類型。指定後不會影響背景程式的邏輯處理，但你在前端接收的資料很可能不是期望的資料，於是js就會報這一類錯誤： SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data ，這個是將dataType指定為json後報的錯誤。

3，後端的php代碼

後端伺服器是nginx，用php來處理髮送過來的資料，代碼也很簡單：

 

 1 <?php 2 // var_dump($_REQUEST); // 為空白數組 3 // var_dump($_FILES); //不為空白 4  5 // 當使用FormData配合ajax上傳檔案時，$_REQUEST、$_POST都是null，php://input也是null 6 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 }

 

代碼的邏輯很簡單這裡就不多解釋了。主要說下我在偵錯工具時遇到的問題，遇到的問題總結起來就一句話：當使用FormData配合ajax上傳檔案時，$_REQUEST、$_POST都是空數組，php://input也是null。可以看到，我在代碼中的第2、3、5行也寫了相關的注釋。為什麼$_REQUEST會是空呢？我查了些資料，但沒找到原因，以後再找原因吧。

 

參考資料：

jQuery.ajax()

FormData

基於jQuery的ajax系列之用FormData實現頁面無重新整理上傳