前言

我們引入jQuery來進行異步上傳可以獲得更好的用戶體驗。 一方面，在JavaScript中進行異步操作比表單更加靈活； 另一方面，異步上傳也避免了上傳大文件時的頁面長時間卡死。

HTML

一個type=file的<input>就可以讓用戶來瀏覽并選擇文件， 一般會把輸入控件放到一個<form>中，下面的一個簡單的表單：

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

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

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

獲取文件列表

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

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

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

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

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

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

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

multipart/form-data

上傳文件比較特殊，其內(nèi)容是二進制數(shù)據(jù)，而HTTP提供的是基于文本的通信協(xié)議。 這時需要采用multipart/form-data編碼的HTTP表單。

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

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

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

jQuery上傳文件

這是XMLHttpRequest Level 2提供的FormData對象可以幫助我們進行二進制文件的 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想必做前端的都很熟悉了，介紹其余三個參數(shù)：

cache

cache設為false可以禁止瀏覽器對該URL（以及對應的HTTP方法）的緩存。 jQuery通過為URL添加一個冗余參數(shù)來實現(xiàn)。

該方法只對GET和HEAD起作用，然而IE8會緩存之前的GET結果來響應POST請求。 這里設置cache: false是為了兼容IE8。

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

contentType

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

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

processData

jQuery會將data對象轉(zhuǎn)換為字符串來發(fā)送HTTP請求，默認情況下會用 application/x-www-form-urlencoded編碼來進行轉(zhuǎn)換。 我們設置contentType: false后該轉(zhuǎn)換會失敗，因此設置processData: false來禁止該轉(zhuǎn)換過程。

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

兼容性與其他選擇

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

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

總結

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。謝謝大家對武林網(wǎng)的支持。