前言

我們引入jQuery來(lái)進(jìn)行異步上傳可以獲得更好的用戶體驗(yàn)。 一方面，在JavaScript中進(jìn)行異步操作比表單更加靈活； 另一方面，異步上傳也避免了上傳大文件時(shí)的頁(yè)面長(zhǎng)時(shí)間卡死。

HTML

一個(gè)type=file的<input>就可以讓用戶來(lái)瀏覽并選擇文件， 一般會(huì)把輸入控件放到一個(gè)<form>中，下面的一個(gè)簡(jiǎn)單的表單：

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

但為什么我只能選擇一個(gè)文件？？給<input>添加一個(gè)multiple屬性就可以多選了！

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

獲取文件列表

上述的<input>將會(huì)擁有一個(gè)叫files的DOM屬性，包含了所選的文件列表（Array）。

$('button').click(function(){
 var $input = $('#avatar');
 // 相當(dāng)于： $input[0].files, $input.get(0).files
 var files = $input.prop('files');
 console.log(files);
});

這個(gè)Array中的每一項(xiàng)都是一個(gè)File對(duì)象，它有下面幾個(gè)主要屬性：

     name: 文件名,只讀字符串,不包含任何路徑信息.

     size: 文件大小,單位為字節(jié),只讀的64位整數(shù).

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

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

multipart/form-data

上傳文件比較特殊，其內(nèi)容是二進(jìn)制數(shù)據(jù)，而HTTP提供的是基于文本的通信協(xié)議。 這時(shí)需要采用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--

每個(gè)字段由一段boundary string來(lái)分隔，瀏覽器保證該boundary string不與內(nèi)容重復(fù)， 因而multipart/form-data能夠成功編碼二進(jìn)制數(shù)據(jù)。

jQuery上傳文件

這是XMLHttpRequest Level 2提供的FormData對(duì)象可以幫助我們進(jìn)行二進(jìn)制文件的 multipart/form-data編碼：

$('button').click(function(){
 var files = $('#avatar').prop('files');

 var data = new FormData();
 data.append('avatar', files[0]);

 $.ajax({
  url: '/api/upload',
  type: 'POST',
  data: data,
  cache: false,
  processData: false,
  contentType: false
 });
});

url, type, data想必做前端的都很熟悉了，介紹其余三個(gè)參數(shù)：

cache

cache設(shè)為false可以禁止瀏覽器對(duì)該URL（以及對(duì)應(yīng)的HTTP方法）的緩存。 jQuery通過(guò)為URL添加一個(gè)冗余參數(shù)來(lái)實(shí)現(xiàn)。

該方法只對(duì)GET和HEAD起作用，然而IE8會(huì)緩存之前的GET結(jié)果來(lái)響應(yīng)POST請(qǐng)求。 這里設(shè)置cache: false是為了兼容IE8。

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

contentType

jQuery中content-type默認(rèn)值為application/x-www-form-urlencoded， 因此傳給data參數(shù)的對(duì)象會(huì)默認(rèn)被轉(zhuǎn)換為query string（見(jiàn)HTTP 表單編碼 enctype）。

我們不需要jQuery做這個(gè)轉(zhuǎn)換，否則會(huì)破壞掉multipart/form-data的編碼格式。 因此設(shè)置contentType: false來(lái)禁止jQuery的轉(zhuǎn)換操作。

processData

jQuery會(huì)將data對(duì)象轉(zhuǎn)換為字符串來(lái)發(fā)送HTTP請(qǐng)求，默認(rèn)情況下會(huì)用 application/x-www-form-urlencoded編碼來(lái)進(jìn)行轉(zhuǎn)換。 我們?cè)O(shè)置contentType: false后該轉(zhuǎn)換會(huì)失敗，因此設(shè)置processData: false來(lái)禁止該轉(zhuǎn)換過(guò)程。

我們給的data就是已經(jīng)用FormData編碼好的數(shù)據(jù)，不需要jQuery進(jìn)行字符串轉(zhuǎn)換。

兼容性與其他選擇

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

這意味著對(duì)于低版本瀏覽器只能使用直接提交文件表單的形式， 但提交大文件表單頁(yè)面會(huì)長(zhǎng)時(shí)間不響應(yīng)，如果希望在低版本瀏覽器中解決該問(wèn)題， 就只能使用別的方式來(lái)實(shí)現(xiàn)了，比如很多支持多文件和上傳進(jìn)度的Flash插件。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。謝謝大家對(duì)腳本之家的支持。

最新評(píng)論