jQuery的ajax中如何使用FormData實現頁面無刷新上傳功能

小編給大家分享一下jQuery的ajax中如何使用FormData實現頁面無刷新上傳功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

1，先看效果圖

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

2，前端的代碼

看下html代碼：     

 <div class="box">
    <div>
     <div class="item">
      <input type="file" name="myfile" >
     </div>
     <div class="item">
      <button type="button"  class="btn-default">ajax提交</button>
     </div>
     <div class="item">
      <button type="submit"  class="btn-default">form提交</button>
     </div>
    </div>
    <div class="prompt" ></div>
   </div>
   <script src="../../js/jquery-3.1.0.min.js"></script>
   <script src="upload01.js"></script>

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

upload01.js代碼：

 $(function($) {
  $('input[name=myfile]').on('change', function(e) {
   $('button[type=button]').on('click', function(e) {
    var formData = new FormData();
    // formData.ppend(name, element);
    formData.append('myfile', $('input[name=myfile]')[0].files[0]);
    $.ajax({
     url: 'upload.php',
     method: 'POST',
     data: formData,
     contentType: false, // 注意這里應設為false
     processData: false,
     cache: false,
     success: function(data) {
     if (JSON.parse(data).result == 1) {
       $('.prompt').html(`文件${JSON.parse(data).filename}已上傳成功`);
      }
     },
     error: function (jqXHR) {
      console.log(JSON.stringify(jqXHR));
     }
    })
    .done(function(data) {
     console.log('done');
    })
    .fail(function(data) {
     console.log('fail');
    })
    .always(function(data) {
     console.log('always');
    });
   });
  });
 });

(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" > （見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來處理發送過來的數據，代碼也很簡單：

 <?php
 // var_dump($_REQUEST); // 為空數組
 // var_dump($_FILES); //不為空 
 // 當使用FormData配合ajax上傳文件時，$_REQUEST、$_POST都是null，php://input也是null
 if (isset($_FILES) && !empty($_FILES)) {
  if (move_uploaded_file($_FILES['myfile']['tmp_name'], $_FILES['myfile']['name'])) {
   echo '{"result": 1, "filename": "' . $_FILES['myfile']['name'] . '"}';
  } else {
   echo '{"result": 0}';
  }
 }

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

看完了這篇文章，相信你對“jQuery的ajax中如何使用FormData實現頁面無刷新上傳功能”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！