Uploadify是一個基於JQuery的多文件上傳JS組件，高度定制，兩個版本可供選擇。flash版本在最新的Safari等不再支持flash的瀏覽器或者一些手機瀏覽器中就無法正常的加載使用，因此推薦使用html5版本！
優點：
- 支持多文件上傳
- 支持進度條顯示
- 支持拖拽上傳
- 支持文件格式檢查及大小限制
- 支持在文件上傳的各個生命周期對文件進行處理
Uploadify兩個版本一個為flash版（免費），一個為HTML5版（收費$5.00 USD，還有一個用戶商業用途的就比較貴了）
基本使用：
環境要求： jQuery1.4或以上的版本；一個能解析php、asp.net等類似的服務器端腳本語言的服務器運行環境。
- 下載uploadifive壓縮文件解壓至你的項目目錄
- 引入相關js、css文件:
<link rel="stylesheet" type="text/css" href="uploadifive.css"><script src="/jquery.js" type="text/javascript"></script><script src="jquery.uploadifive.js" type="text/javascript"></script>
- 頁面中添加type="file"的一個input,並且指定id
<input id="file_upload" type="file" name="file_upload" /> - 初始化uploadfive，綁定到id為file_upload的input上
$(function() {
$('#file_upload').uploadifive({
//處理文件上傳的服務器端腳本，可根據自己的項目環境修改
'uploadScript' : 'uploadifive.php'
// Put your options here
});
});
Options選項參數
對常用參數進行解釋
- auto:是否自動觸發上傳 ，如果選擇false需要手動觸發通過調用：
$('#file_upload').uploadifive('upload') - buttonText:指定上傳按鈕文字
- checkScript:指定檢查文件名是否重復的服務器端腳本
- dnd:是否允許拖動上傳，如果為false則禁用拖動上傳
- fileObjName:服務器端獲取的文件對象的名稱，如php的 $_FILES['fileObjName']
- fileSizeLimit:限制上傳文件的大小【單位KB,MB,GB】
- fileType:上傳文件類型：如圖片 image/*，如果指定了類型限制，點擊上傳彈出的資源選擇器中，非限定的文件類型將無法不選擇
- formData:額外提交的表單數據可以在這個參數下指定
{'someKey' : 'someValue'} - height|width:上傳按鈕的寬度與高度只能通過這兩個屬性進行修改
- multi:是否多文件上傳[true|false]
Events回調方法
- onAddQueueItem:當文件添加至上傳隊列中時觸發此回調方法
$(function() {
$('#file_upload').uploadifive({
'uploadScript' : '/uploadifive.php',
'onAddQueueItem' : function(file) {
alert('The file ' + file.name + ' was added to the queue!');
}
});
});
- onCancle:當點擊取消上傳，從上傳隊列中移除文件對象時觸發
$(function() {
$('#file_upload').uploadifive({
'uploadScript' : '/uploadifive.php',
'onCancel' : function() {
alert('The file ' + file.name + ' was cancelled!');
}
});
});
- onUpload:當調用upload方法手動觸發上傳是觸發一次
- onUploadFile:在每個文件准備開始上傳時觸發一次【這個回調方法存在一個bug，見下文】
$(function() {
$('#file_upload').uploadifive({
'uploadScript' : '/uploadifive.php'
'onUploadFile' : function(file) {
alert('The file ' + file.name + ' is being uploaded.');
}
});
});
- onProgress:文件上傳過程中不斷的觸發，因此你可以在此回調方法中定制你的上傳進度等信息
$(function() {
$('#file_upload').uploadifive({
'uploadScript' : '/uploadifive.php'
'onProgress' : function(file, e) {
if (e.lengthComputable) {
var percent = Math.round((e.loaded / e.total) * 100);
}
file.queueItem.find('.fileinfo').html(' - ' + percent + '%');
file.queueItem.find('.progress-bar').css('width', percent + '%');
}
});
});
- onUploadComplete:文件上傳完成時觸發
回調參數 file:上傳完的文件對象;data:服務器端（uplodify.php）返回的信息
$(function() {
$('#file_upload').uploadifive({
'uploadScript' : '/uploadifive.php'
'onUploadComplete' : function(file, data) {
alert('The file ' + file.name + ' uploaded successfully.');
}
});
});
- onFallback:初始化時檢查瀏覽器是否支持HTML5
- onError:在文件添加到上傳隊列或者在上傳的過程中發生錯誤的回調函數
errorType類型見官網文檔
Methods直接調用的方法
- debug:比較有用的debug方法，可以在控制台打印出上傳的相關信息
<a href="javascript:$('#file_upload').uploadifive('debug')">Debug</a>
與七牛結合直接上傳文件到七牛雲存儲
注：上傳到七牛需要對幾個參數進行修改
- 七牛可以接受的fileObjName的名稱是file
- 表單數據中必須包含上傳token[token有服務器端返回]
- 表單數據中指定上傳的key，作為七牛空間中存儲的文件名
- uploadScript指定為:http://up.qiniu.com/
以上2，3兩項數據的傳遞需要修改formData選項，如果是單個文件上傳，這樣是沒有問題的，如果是多文件上傳的情況，第一個文件正常上傳成功，當上傳第二個時，up.qiniu.com就會返回一個錯誤狀態碼614,即文件已存在。
最初是想在onAddQueueItem回調函數中修改formData中token和key的值，但是並沒有得到想要的結果。查看請求到七牛的header中的表單信息的key值是一樣的，所以，在文件加入隊列中時進行修改表單formData只能觸發一次，從源碼中可以看到確實如此。
繼續查看文檔找到onUploadFile是在每個文件上傳前觸發，於是修改代碼，調試發現此回調函數並沒有被觸發，查看源碼毫無此回調函數調用的蹤跡，於是加入如下代碼到jquery.uploadfive.js的$data.uploadFile 的函數里的填充form表單數據之前379行，如下所示：
// Create a new FormData object
var formData = new FormData();
// Add the form data
formData.append(settings.fileObjName, file);
//trigger onUploadFile fucntion 看這里看這里看這里!!!
if (typeof settings.onUploadFile === 'function') {
settings.onUploadFile.call($this, file);
}
// Add the rest of the formData
for (i in settings.formData) {
formData.append(i, settings.formData[i]);
}
至此，多文件上傳七牛與uploadfive的結合完成！
參考文檔：uploadify官網文檔html5版本