jQuery用FormData實作檔案上傳的方法-PHP开发-PHP中文網

jQuery用FormData實作檔案上傳的方法

高洛峰

發布： 2016-12-06 13:15:11

原創

1718 人瀏覽過

前言

我們引入jQuery來進行非同步上傳可以獲得更好的使用者體驗。一方面，在JavaScript中進行非同步操作比表單更靈活；另一方面，非同步上傳也避免了上傳大檔案時的頁面長時間卡住。

HTML

一個type=file的就可以讓使用者來瀏覽並選擇文件，一般會把輸入控制項放到一個

中，下面的一個簡單的表單：

<form>
 <input type="file" id="avatar" name="avatar">
 <button type="button">保存</button>
</form>

登入後複製

但為什麼我只能選擇一個檔案？？為新增一個multiple屬性就可以多選了！

<input type="file" id="avatar" name="avatar" multiple>

登入後複製

取得檔案清單

上述的將會擁有一個叫做files的DOM屬性，包含了所選的檔案清單（Array）。

$(&#39;button&#39;).click(function(){
 var $input = $(&#39;#avatar&#39;);
 // 相当于： $input[0].files, $input.get(0).files
 var files = $input.prop(&#39;files&#39;);
 console.log(files);
});

登入後複製

這個Array中的每一項都是一個File對象，它有下列幾個主要屬性：

: 檔案大小,單位為位元組,唯讀的64位元整數.

type: MIME類型,只讀字串,如果類型未知,則傳回空字串.

詳情可以參考：https:// developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications

multipart/form-data

上傳檔案較為特殊，其內容是二進位數據，而HTTP提供的則是基於文字的通訊協定。這時需要採用multipart/form-data編碼的HTTP表單。

其HTTP訊息體格式如下所示：

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="title"
 
harttle
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="avatar"; filename="harttle.png"
Content-Type: image/png
 
 ... content of harttle.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

登入後複製

每個字段由一段boundary string來分隔，瀏覽器保證該boundary string不與內容重複，因編碼而multipart/2-data 。

jQuery上傳檔案

這是XMLHttpRequest Level 2提供的FormData物件可以幫助我們進行二進位檔案的 multipart/form-data編碼：

$(&#39;button&#39;).click(function(){
 var files = $(&#39;#avatar&#39;).prop(&#39;files&#39;);
 
 var data = new FormData();
 data.append(&#39;avatar&#39;, files[0]);
 
 $.ajax({
  url: &#39;/api/upload&#39;,
  type: &#39;POST&#39;,
  data: data,
  cache: false,
  processData: false,
  contentType: false
 });
});

登入後複製

語

,前端，介紹其餘三個參數：

cache

cache設為false可以禁止瀏覽器對該URL（以及對應的HTTP方法）的快取。 jQuery透過為URL新增一個冗餘參數來實現。

此方法只對GET和HEAD起作用，然而IE8會快取之前的GET結果來回應POST請求。這裡設定cache: false是為了相容IE8。

參考：http://api.jquery.com/jquery.ajax/

contentType

jQuery中content-type預設值為application/x-www-form-urlencoded，因此傳給data參數的物件會預設被轉換為query string（見HTTP 表單編碼enctype）。

我們不需要jQuery做這個轉換，否則會破壞掉multipart/form-data的編碼格式。因此設定contentType: false來禁止jQuery的轉換操作。

processData

jQuery會將data物件轉換為字串來傳送HTTP請求，預設會用 application/x-www-form-urlencoded編碼來轉換。我們設定contentType: false後該轉換會失敗，因此設定processData: false來禁止該轉換過程。

我們給的data就是已經用FormData編碼好的數據，不需要jQuery進行字串轉換。

相容性與其他選擇

本文介紹的jQuery檔案上傳方式依賴於FormData對象，這是XMLHttpRequest Level 2接口，需要IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

這意味著對於低版本瀏覽器只能使用直接提交文件表單的形式，但提交大文件表單頁面會長時間不響應，如果希望在低版本瀏覽器中解決該問題，就只能使用別的方式來實現了，例如很多支援多個檔案和上傳進度的Flash插件。