abstrakt：jQuery File Upload 是一個(gè)Jquery文件上傳組件，支持多文件上傳、取消、刪除，上傳前縮略圖預(yù)覽、列表顯示圖片大小，支持上傳進(jìn)度條顯示；支持各種動(dòng)態(tài)語(yǔ)言開發(fā)的服務(wù)器端。特點(diǎn)：拖放支持；上傳進(jìn)度條；圖像預(yù)覽；可定制和可擴(kuò)展的；兼容任何服務(wù)器端應(yīng)用平臺(tái)（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.）。使用方法：1. 需要加載的j

jQuery File Upload 是一個(gè)Jquery文件上傳組件，支持多文件上傳、取消、刪除，上傳前縮略圖預(yù)覽、列表顯示圖片大小，支持上傳進(jìn)度條顯示；支持各種動(dòng)態(tài)語(yǔ)言開發(fā)的服務(wù)器端。

特點(diǎn)：拖放支持；上傳進(jìn)度條；圖像預(yù)覽；可定制和可擴(kuò)展的；兼容任何服務(wù)器端應(yīng)用平臺(tái)（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.）。

使用方法：

1. 需要加載的js文件：

jquey-1.8.3.min.js

jquery-ui-widget.js

jquery.iframe-transport.js

jquery.fileupload.js

2. html代碼：

<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>

3. js代碼：

$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});

3.1 顯示上傳進(jìn)度條：　

$('#fileupload').fileupload({
　progressall: function (e, data) {
　var progress = parseInt(data.loaded / data.total * 100, 10);
　$('#progress .bar').css(
　'width',
　progress + '%'
　);
　}
　});

3.2 需要一個(gè)<div>容器用來顯示進(jìn)：

<div id="progress">
　<div class="bar" style="width: 0%;"></div>
　</div>

4. API

4.1 Initialization：

在上傳按鈕上調(diào)用fileupload()方法;

示例：

$('#fileupload').fileupload();

4.2 Options :

1: url：請(qǐng)求發(fā)送的目標(biāo)url

Type: string

Example: '/path/to/upload/handler.json'

2.Type: 文件上傳HTTP請(qǐng)求方式，可以選擇“POST”，“PUT”或者"PATCH",

默認(rèn)"POST"

Type: string

Example: 'PUT'

3. dataType:希望從服務(wù)器返回的數(shù)據(jù)類型，默認(rèn)"json"

Type: string

Example: 'json'

4. autoUpload:默認(rèn)情況下，只要用戶點(diǎn)擊了開始按鈕被添加至組件的文件會(huì)立即上傳。將autoUpload值設(shè)為true可以自動(dòng)上傳。

Type: boolean

Default: true

5. acceptFileTypes：允許上傳的的文件類型

Example: /(\.|\/)(gif|jpe?g|png|xlsx)$/i

6. maxFileSize: 最大上傳文件大小

Example: 999000 (999KB) //單位：B

7. minFileSize:最小上傳文件大小

Example: 100000 (100KB) //單位：B

8.previewMaxWidth : 圖片預(yù)覽區(qū)域最大寬度

Example: 100 //單位：px

4.3 Callback Options:

使用方法一：函數(shù)屬性

實(shí)例：

$('#fileupload').fileupload({
　　drop: function (e, data) {
　　$.each(data.files, function (index, file) {
　　alert('Dropped file: ' + file.name);
　　});
　　},
　　change: function (e, data) {
　　$.each(data.files, function (index, file) {
　　alert('Selected file: ' + file.name);
　　});
　　}
　　});

使用方法二：綁定事件監(jiān)聽函數(shù)

實(shí)例：

$('#fileupload')
　　　　.bind('fileuploaddrop', function (e, data) {/* ... */})
　　　　.bind('fileuploadchange', function (e, data) {/* ... */});

每個(gè)事件名稱都添加前綴：”fileupload”;

注意推薦使用第二種方法。

常用的回調(diào)函數(shù)：

1. add: 當(dāng)文件被添加到上傳組件時(shí)被觸發(fā)

$('#fileupload').bind('fileuploadadd', function (e, data) {/* ... */});

或者$('#fileupload').on('fileuploadadd', function (e, data) {/* ... */});

2. processalways: 當(dāng)一個(gè)單獨(dú)的文件處理隊(duì)列結(jié)束（完成或失敗時(shí)）觸發(fā)

3. progressall: 全局上傳處理事件的回調(diào)函數(shù)

Example:

$('#fileupload').on('fileuploadprogressall', function (e, data) { //進(jìn)度條顯示
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
});

4. fail : 上傳請(qǐng)求失敗時(shí)觸發(fā)的回調(diào)函數(shù)，如果服務(wù)器返回一個(gè)帶有error屬性的json響應(yīng)這個(gè)函數(shù)將不會(huì)被觸發(fā)。

5. done : 上傳請(qǐng)求成功時(shí)觸發(fā)的回調(diào)函數(shù)，如果服務(wù)器返回一個(gè)帶有error屬性的json響應(yīng)這個(gè)函數(shù)也會(huì)被觸發(fā)。

6. always : 上傳請(qǐng)求結(jié)束時(shí)（成功，錯(cuò)誤或者中止）都會(huì)被觸發(fā)。

更多關(guān)于jQuery File Upload文件上傳插件使用詳解請(qǐng)關(guān)注PHP中文網(wǎng)（ipnx.cn）其它文章！