jquery uploadify文件上傳插件用法精析
CreationTime--2018年8月2日11點12分
Author:Marydon
一、參數說明
1.參數設置
$("#file_upload").uploadify({
height : 30,//高度
swf : '/uploadify/uploadify.swf',//指定swf文件
uploader : '/uploadify/uploadify.do',//后台處理的url
width : 120,//寬度
buttonText: '上傳圖片', //按鈕顯示的文字
fileTypeExts: '*.*',//上傳文件的類型,多個類型使用;分割'*.gif; *.jpg; *.png',默認值為：'*.*'
fileTypeDesc: 'Image Files',//這個屬性值必須設置fileTypeExts屬性后才有效，用來設置選擇文件對話框中的提示文本,默認值為：All Files
formData: {'someKey':'someValue','someOtherKey':1},//發送給后台的其他參數通過formData指定
queueID: 'fileQueue',//可以為DOM元素的id,設置隊列樣式, 默認值為false,隊列id動態生成，不帶#
auto: true,//選擇文件后自動上傳，默認值為：true
multi: true,//設置為true將允許多文件上傳，默認值為：true
buttonClass:'xttblog',//上傳按鈕的樣式
buttonImage:'',//按鈕的圖片路徑
buttonCursor:'hand',//鼠標指針懸停在按鈕上的樣子，默認值為：hand
checkExisting:'/uploadify/check-exists.do',//文件的路徑，檢查目標文件夾中是否已上載的文件的名稱.如果文件名不存在,該腳本將返回1,如果文件名存在或0，默認值為false
debug:true,//打開swfupload調試模式，默認值為：false
fileObjName:'Filedata',//后台可以通過這個名字獲取到文件對象,默認值為：Filedata
fileSizeLimit:'',//允許文件上傳的最大大小.這個值可以是數字或字符串.如果它是一個字符串,它接受一個單位(B,KB,MB,GB)，默認單位為KB。值設置為0,表示要上傳的文件大小無限制(單文件大小)
itemTemplate:'',//選擇不同的HTML模板,添加上傳文件到上傳隊列。主要有4種模板:instanceID(uploadify實例id)、fileID(文件id)、fileName(文件名字)、fileSize(文件大小).例如：${fileName}，默認值為：false
method:'POST',//POST或GET，默認值為post
overrideEvents:['onUploadProgress'],//重寫事件,onUploadProgress進度條不更新，jsonArray,默認值為：空數組[]
preventCaching:true,//是否緩存,默認值為：true不緩存
progressData:'percentage',//進度條percentage百分百、speed上傳速度更新,默認值為：percentage
queueSizeLimit:999,//隊列大小，超過將觸發onselecterror事件,和uploadLimit類似,默認值為：999
removeCompleted:true,//上傳完成后是否刪除上傳隊列，默認值為：true
removeTimeout:3,//上傳完成后,延遲3秒刪除隊列，默認值為：3秒
requeueErrors:true,//如果為true上傳失敗后將繼續嘗試再次上傳，默認值為：fasle
successTimeout:30,//文件上傳成功后服務端應返回成功標志，此項設置返回結果的超時時間，默認值為：30秒
uploadLimit:999,//最大上傳文件數量，如果達到或超出此限制將會觸發onUploadError事件，默認值為：999
});
2.事件設置
$("#file_upload").uploadify({
onCancel : function(file) {
//移除文件時觸發
},
onClearQueue:function(queueItemCount){
//當調用函數cancel方法且queueItemCount>1時才觸發，queueItemCount參數為被取消上傳的文件數量
},
onDestroy:function(queueItemCount){
//當destory方法被調用時觸發
},
onDialogClose:function(queueData){
//當文件瀏覽框關閉時觸發，如果將此事件被重寫，則當向隊列添加文件上傳出錯時不會彈出錯誤消息提示
//queueData對象包含如下屬性：
//filesSelected 文件選擇對話框中共選擇了多少個文件
//filesQueued 已經向隊列中添加了多少個文件
//filesReplaced 已經向隊列中替換了多少個文件
//filesCancelled 取消了多少個文件
//filesErrored 出錯了多少個文件
},
onDialogOpen:function(){
//當文件選擇對話框彈出時立即出發，但可能在文件選擇對話框被關閉之前並不能全部執行
},
onDisable:function(){
//當disable方法禁用Uploadify上傳按鈕時被調用時觸發
},
onEnable:function(){
//當disable方法啟用Uploadify上傳按鈕時被調用時觸發
},
onFallback:function(){
//當Uploadify初始化過程中檢測到當前瀏覽器不支持flash時觸發
alert("當前瀏覽器未安裝或未啟用flash插件，無法進行文件上傳！");
},
onInit:function(){//首次初始化Uploadify結束時觸發
},
onQueueComplete:function(queueData){
//文件上傳隊列處理完畢后觸發,queueData對象包含如下屬性：
//uploadsSuccessful上傳成功的文件數量
//uploadsErrored上傳失敗的文件數量
},
onSelect:function(file){//選擇文件后向隊列中添加每個上傳任務時都會觸發
},
onSelectError:function(file, errorCode, errorMsg){
//選擇文件后向隊列中添加每個上傳任務時如果失敗都會觸發
//file文件對象
//errorCode錯誤代碼如下：
//QUEUE_LIMIT_EXCEEDED任務數量超出隊列限制；
//FILE_EXCEEDS_SIZE_LIMIT文件大小超出限制；
//ZERO_BYTE_FILE文件大小為0
//INVALID_FILETYPE文件類型不符合要求
//errorMsg錯誤提示，可通過'this.queueData.errorMsg'定制
},
onSWFReady:function(){//Flash文件載入成功后觸發
},
onUploadComplete:function(file){//每個文件上傳完畢后無論成功與否都會觸發
},
onUploadError:function(file, errorCode, errorMsg, errorString){
//文件上傳出錯時觸發，參數由服務端程序返回
},
onUploadProgress:function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal){
//處理上傳隊列的過程中會多次觸發此事件，每當任務狀態有更新時都會觸發
//file文件對象
//bytesUploaded已上傳的字節數
//bytesTotal文件總字節數
//totalBytesUploaded當前任務隊列中全部文件已上傳的總字節數
//totalBytesTotal當前任務隊列中全部文件的總字節數
},
onUploadStart:function(file){//當文件即將開始上傳時立即觸發
},
onUploadSuccess:function(file, data, response){
//當文件上傳成功時觸發
//file文件對象
//data服務端輸出返回的信息，數據格式必須是字符串，否則接收不到
//response有輸出時為true,如果無響應為false，如果返回的是false,當超過successTimeout設置的時間后假定為true
}
});
3.方法調用
cancel(fileID, suppressEvent)
用途：
取消隊列中的任務，不管此任務是否已經開始上傳
參數說明：
fileID要取消的文件ID，如果為空則取消隊列中第一個任務，如果為'*'則取消所有任務
suppressEvent是否阻止觸發onUploadCancel事件，當清空隊列時非常實用
示例：
$('#file_upload').uploadify('cancel');// 取消第一個
$('#file_upload').uploadify('cancel','*');// 清空隊列
destroy()
用途：
銷毀Uploadify實例並將文件上傳按鈕恢復到原始狀態
示例：
$('#file_upload').uploadify('destroy');// 銷毀Uploadify實例
disable(setDisabled)
用途：
禁用或啟用文件瀏覽按鈕
參數說明：
setDisabled – 設置為true表示禁用，false為啟用
示例：
$('#file_upload').uploadify('disable',true);// 禁用按鈕
settings(name, value, resetObjects)
用途：
獲取或設置Uploadify實例參數
參數說明：
name – 屬性名稱，如果只提供屬性名稱則表示獲取其值
value – 屬性值
resetObjects – 設置為true時，更新postData對象將清空現有的值。否則，新的值將被添加到其末尾
示例：
$('#file_upload').uploadify('settings','buttonText','BROWSE');// 將按鈕參數的值改為BROWSE
$('#file_upload').uploadify('settings','buttonText'));// 獲取到按鈕參數的值
stop()
用途：
停止當前正在上傳的任務
示例：
$('#file_upload').uploadify('stop');//停止上傳
upload(fileID)
用途：
立即上傳指定的文件，如果fileID為’*'表示上傳所有文件，要指定上傳多個文件，則將每個文件的fileID作為一個參數
示例：
$('#file_upload').uploadify('upload','*');// 開始上傳所有文件
二、調用
第一步：頁面隨意設置一個id="file_upload"的html元素
<!-- 文件上傳 --> <div id="file_upload"></div>
說明：指定一個dom元素的id，該dom元素在uploadify初始化后會被Flash按鈕代替，這個dom元素相當於一個占位符。
第二步：頁面加載完畢后，綁定並設置參數
// 頁面加載完畢后，才能獲取到file_upload這個dom對象
$(function(){
$('#file_upload').uploadify({
// 參數配置
});
});
加載成功，頁面元素展示
三、數據交互
1.前台如何傳參？
方法一：get傳參
方式一（正確方式）：通過onUploadStart實現（推薦使用）
$('#file_upload').uploadify({
'method', 'get',
'buttonText' : '添加文件',
'fileTypeExts' : '*.gif; *.jpg; *.png;*.pdf;*.zip;',// 文件類型限制
'fileTypeDesc' : '請選擇gif jpg png pdf zip類型的文件',// 文件類型描述
'swf' : baseUrl + '/uploadify/flash/uploadify.swf',// flash插件
'uploader' : baseUrl + '/uploadFile.do',// 上傳的文件請求處理
'onDialogClose' : function(queueData) {// 選擇文件窗口關閉時，觸發
},
'onUploadStart' : function(file){// 文件上傳前，觸發
// 請求參數：上傳每個文件的同時提交到服務器的額外數據，中文需要編碼
$('#file_upload').uploadify("settings","formData",{
'param1' : encodeURI('測試文件上傳傳參'),
'param2' : $('#aa').val()// 動態參數
});
},
'onUploadSuccess' : function(file, data, response) {// 上傳成功
window.open(baseUrl + '/fileList.jsp');
},
'onUploadError' : function(file, errorCode, errorMsg, errorString) {// 上傳失敗
},
'onFallback' : function(){// 文件上傳按鈕加載失敗
alert("當前瀏覽器未安裝或未啟用flash插件，無法進行文件上傳！");
}
});
方式二（錯誤實現方式）：直接聲明
直接聲明 'formData' : {'param1': encodeURI('測試文件上傳傳參')},這種方式后台接收不到傳遞的參數。
方法二：post傳參
方式一：通過onUploadStart實現（推薦使用）
$('#file_upload').uploadify({
'method', 'post',// 默認值為post，可以不聲明
'buttonText' : '添加文件',
'fileTypeExts' : '*.gif; *.jpg; *.png;*.pdf;*.zip;',// 文件類型限制
'fileTypeDesc' : '請選擇gif jpg png pdf zip類型的文件',// 文件類型描述
'swf' : baseUrl + '/uploadify/flash/uploadify.swf',// flash插件
'uploader' : baseUrl + '/uploadFile.do',// 上傳的文件請求處理
'onDialogClose' : function(queueData) {// 選擇文件窗口關閉時，觸發
},
'onUploadStart' : function(file){// 文件上傳前，觸發
// 請求參數：上傳每個文件的同時提交到服務器的額外數據，中文需要編碼
$('#file_upload').uploadify("settings","formData",{
'param1' : encodeURI('測試文件上傳傳參'),
'param2' : $('#aa').val()// 動態參數
});
},
'onUploadSuccess' : function(file, data, response) {// 上傳成功
window.open(baseUrl + '/fileList.jsp');
},
'onUploadError' : function(file, errorCode, errorMsg, errorString) {// 上傳失敗
},
'onFallback' : function(){// 文件上傳按鈕加載失敗
alert("當前瀏覽器未安裝或未啟用flash插件，無法進行文件上傳！");
}
});
方式二： 直接聲明
'formData' : {'param1': encodeURI('測試文件上傳傳參')},
2.后台如何接收到參數？
方式一對應的接收參數的方法為：
// 通過指定onUploadStart()獲取參數
String param1 = request.getParameter("param1");
// 解碼
param1 = URLDecoder.decode(param1, "utf-8");
方式二對應的接收參數方法為：
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) {
// 通過設置formData獲取參數
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletContext servletContext = this.getServletConfig().getServletContext();
File repository = (File) servletContext.getAttribute("javax.servlet.context.tempdir");
factory.setRepository(repository);
ServletFileUpload upload = new ServletFileUpload(factory);
try {
List<FileItem> items = upload.parseRequest(req);
// 7.對所有請求信息進行判斷
Iterator<FileItem> iter = items.iterator();
while (iter.hasNext()) {
FileItem item = iter.next();
// form表單格式
if (item.isFormField()) {
String paramName = item.getFieldName();
if ("param1".equals(paramName)) {
String paramValue = item.getString();
// 解碼
paramValue = URLDecoder.decode(paramValue, "utf-8");
System.out.println("參數名：" + paramName + "=" + paramValue);
}
} else {
// 文件格式處理 TODO
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
3.小結：
推薦使用第一種方式進行傳參；
不管是get傳參還是post傳參，參數值為中文時，都需要先進行編碼，否則后台接收到的數據亂碼（比如：使用encodeURI()）；
不管在初始化的時候，定義的uploadify對象，定義的是post還是get，最終是以post方式進行提交的。
四、如何設置手動上傳？
第一步：設置參數
'auto' : false,
第二步：頁面設置按鈕
<div id="ctrlUpload">
<a href="javascript:;" onclick="$('#file_upload').uploadify('upload', '*');" class="Button"
onmouseover="javascript:this.className='ButtonOver'" onmouseout="javascript:this.className='Button'">
上傳所有
</a>
<a href="javascript:;" onclick="$('#file_upload').uploadify('cancel', '*');$('#ctrlUpload').hide();" class="Button"
onmouseover="javascript:this.className='ButtonOver'" onmouseout="javascript:this.className='Button'">
取消上傳
</a>
</div>