當我們需要異步上傳文件的時候，我們傾向於在網上查找相關的JQuery插件，jquery-file-upload就是我們經常看到的，但是他的主頁是英文的，對於我們這些英語比較差的同學來說，簡直就是。。。今天就來講一下最簡單的使用方法，如果有寫的不好的地方還請拍磚。
介紹
jQuery File Upload是一個非常優秀的上傳組件，主要使用了XHR作為上傳方式，並且利用了相當多的現代瀏覽器功能，所以可以實現諸如批量上傳、超大文件上傳、圖片預覽、拖拽上傳、上傳進度顯示、跨域上傳等功能。
他的功能非常強大，API也比較簡單，如果能夠熟練使用$.ajax的話，相信理解起來也不是多難的事，但是它的UI也會非常難用。個人建議，如果小的組件可以自己定義一套簡單的UI，沒必要使用那么復雜的東西。如果你一定要使用它的UI的話，建議你看一下定制jQuery File Upload為微博式單文件上傳
jQuery File Upload的簡化模型
jQuery File Upload包含了一堆文件，首先需要弄清楚的是最核心的部分是哪些，官網已經給出了最簡單的模型基本功能，一個最簡單的jQuery File Upload上傳組件，必須包括以下文件：
- jQuery庫，建議jQuery 1.8以上版本
- js/vendor/jquery.ui.widget.js ： jQuery UI Widget
- js/jquery.iframe-transport.js ： 擴展iframe數據傳輸
- js/jquery.fileupload.js ： jQuery File Upload核心類
- js/cors/jquery.xdr-transport.js 在IE下應載入此文件解決跨域問題
官網事例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
</script>
</body>
</html>
當我們需要點擊按鈕才能提交上傳的時候，按鈕上傳
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
data.context = $('<button/>').text('Upload')
.appendTo(document.body)
.click(function () {
data.context = $('<p/>').text('Uploading...').replaceAll($(this));
data.submit();
});
},
done: function (e, data) {
data.context.text('Upload finished.');
}
});
});
淺談設計原理
-
當我們對某個file input標簽執行 upload插件的初始化方法后，插件會監聽這個file input的change事件
-
當用戶選擇文件的時候，會觸發change事件
if ($.support.fileInput) { this._on(this.options.fileInput, { change: this._onChange }); } -
在_onChange處理函數中，會遍歷files，觸發upload插件的change方法
-
當change函數返回true的時候，會觸發upload插件的add方法
-
在upload插件的回調函數中，會傳入兩個參數，fn(事件信息, 數據對象)，這個數據對象非常重要，我們幾乎所有的操作都要使用到它
-
在upload插件的add方法中可以執行我們的邏輯，例如我們想判斷文件后綴是否滿足條件，插件自帶的參數 acceptFileTypes 在簡化模型中不起作用，我們可以在change和add方法中判斷，如果不滿足返回false即可，如果通過可以直接執行data.submit()進行提交
-
如果上傳成功會執行done函數（響應成功），失敗則會執行fail函數
-
所有的回調函數的原理都是一樣的，后面的大家自己研究
自定義UI
聊聊官網自帶UI
自定義UI模版需要嚴格按照官網提供的模版進行操作，否則可能會出現各種問題，必要使用他的模版的原因是：ui的JS中操作Dom的邏輯都是固定的，如果你不按照這種格式的話，js查找不到相應的元素，不能獲取相應的數據，包括上面提到的data數據。
探討自定義UI
官網效果：
自定義實現：
這個插件所有的核心就是上面提到的data數據，我們可以隨意的定義UI，但是定義好之后需要對UI和data數據進行綁定，這個是最重要的環節，圖中的文件列表右側的start、cancle按鈕都非常好實現，使用簡單模型里面的例子既可以了，這里就不多介紹了。
這里面最讓人煩惱的就是上面那幾個按鈕，怎么綁定到所有數據上呢？方法非常簡單，就是你把每一個文件的data數據存儲在一個地方（可以使用jQuery.data()），在點擊上面按鈕的時候，查找符合要求的文件列表，讀取data信息，調用data.submit...等方法就可以了，SoEasy！
結論
data這個數據對象非常重要，用data能實現你想要的自定義功能。