屬性名稱 | 默認值 | 說明 |
auto | true | 設置爲true當選擇文件後就直接上傳了,爲false需要點擊上傳按鈕才上傳 。 |
buttonClass | ” | 按鈕樣式 |
buttonCursor | ‘hand’ | 鼠標指針懸停在按鈕上的樣子 |
buttonImage | null | 瀏覽按鈕的圖片的路徑 。 |
buttonText | ‘SELECT FILES’ | 瀏覽按鈕的文本。 |
checkExisting | false | 文件上傳重複性檢查程序,檢查即將上傳的文件在服務器端是否已存在,存在返回1,不存在返回0 |
debug | false | 如果設置爲true則表示啓用SWFUpload的調試模式 |
fileObjName | ‘Filedata’ | 文件上傳對象的名稱,如果命名爲’the_files’,PHP程序可以用$_FILES['the_files']來處理上傳的文件對象。 |
fileSizeLimit | 0 |
上傳文件的大小限制 ,如果爲整數型則表示以KB爲單位的大小,如果是字符串,則可以使用(B, KB, MB, orGB)爲單位,比如’2MB’; 如果設置爲0則表示無限制 |
fileTypeDesc | ‘All Files’ | 這個屬性值必須設置fileTypeExts屬性後纔有效,用來設置選擇文件對話框中的提示文本,如設置fileTypeDesc爲“請選擇rardoc pdf文件” |
fileTypeExts | ‘*.*’ | 設置可以選擇的文件的類型,格式如:’*.doc;*.pdf;*.rar’ 。 |
formData | JSON格式上傳每個文件的同時提交到服務器的額外數據,可在’onUploadStart’事件中使用’settings’方法動態設置。 | |
height | 30 | 設置瀏覽按鈕的高度 ,默認值 |
itemTemplate | false |
用於設置上傳隊列的HTML模版,可以使用以下標籤: instanceID – Uploadify實例的ID fileID – 列隊中此文件的ID,或者理解爲此任務的ID fileName – 文件的名稱 fileSize – 當前上傳文件的大小 插入模版標籤時使用格式如:${fileName} |
method | Post | 提交方式Post或Get |
multi | true | 設置爲true時可以上傳多個文件。 |
overrideEvents | 設置哪些事件可以被重寫,JSON格式,如:’overrideEvents’ : ['onUploadProgress'] | |
preventCaching | true | 如果爲true,則每次上傳文件時自動加上一串隨機字符串參數,防止URL緩存影響上傳結果 |
progressData | ‘percentage’ | 設置上傳進度顯示方式,percentage顯示上傳百分比,speed顯示上傳速度 |
queueID | false | 設置上傳隊列容器DOM元素的ID,如果爲false則自動生成一個隊列容器。 |
queueSizeLimit | 999 |
隊列最多顯示的任務數量,如果選擇的文件數量超出此限制,將會出發onSelectError事件。 注意此項並非最大文件上傳數量,如果要限制最大上傳文件數量,應設置uploadLimit。 |
removeCompleted | true | 是否自動將已完成任務從隊列中刪除,如果設置爲false則會一直保留此任務顯示。 |
removeTimeout | 3 | 如果設置了任務完成後自動從隊列中移除,則可以規定從完成到被移除的時間間隔。 |
requeueErrors | false | 如果設置爲true,則單個任務上傳失敗後將返回錯誤,並重新加入任務隊列上傳。 |
successTimeout | 30 | 文件上傳成功後服務端應返回成功標誌,此項設置返回結果的超時時間 |
swf | ‘uploadify.swf’ | uploadify.swf 文件的相對路徑。 |
uploader | uploadify.php | 後臺處理程序的相對路徑。 |
uploadLimit | 999 | 最大上傳文件數量,如果達到或超出此限制將會觸發onUploadError事件。 |
width | 120 | 設置文件瀏覽按鈕的寬度。 |
事件名稱 | 說明 |
onCancel(file) |
當點擊文件隊列中文件的關閉按鈕或點擊取消上傳時觸發,file參數爲被取消上傳的文件對象 |
onClearQueue(queueItemCount) | 當調用函數cancel方法時觸發,queueItemCount參數爲被取消上傳的文件數量。 |
onDestroy() | 當destory方法被調用時觸發 |
onDialogClose(queueData) |
當文件瀏覽框關閉時觸發,如果將此事件被重寫,則當向隊列添加文件上傳出錯時不會彈出錯誤消息提示。 queueData對象包含如下屬性:
|
onDialogOpen() | 當文件選擇對話框彈出時立即出發,但可能在文件選擇對話框被關閉之前並不能全部執行。 |
onDisable() | 當disable方法禁用Uploadify上傳按鈕時被調用時觸發。 |
onEnable() | 當disable方法啓用Uploadify上傳按鈕時被調用時觸發。 |
onFallback() | 當Uploadify初始化過程中檢測到當前瀏覽器不支持flash時觸發。 |
onInit() | 首次初始化Uploadify結束時觸發。 |
onQueueComplete(queueData) |
文件上傳隊列處理完畢後觸發。 queueData對象包含如下屬性:
|
onSelect(file) |
選擇文件後向隊列中添加每個上傳任務時都會觸發。 |
onSelectError(file, errorCode, errorMsg) |
選擇文件後向隊列中添加每個上傳任務時如果失敗都會觸發。 file – 文件對象 errorCode – 錯誤代碼如下:
errorMsg – 錯誤提示,可通過’this.queueData.errorMsg’定製 |
onSWFReady() | Flash文件載入成功後觸發。 |
onUploadComplete(file) | 每個文件上傳完畢後無論成功與否都會觸發。 |
onUploadError(file, errorCode, errorMsg, errorString) | 文件上傳出錯時觸發,參數由服務端程序返回。 |
onUploadProgress(file, bytesUploaded, bytesTotal,totalBytesUploaded, totalBytesTotal) |
處理上傳隊列的過程中會多次觸發此事件,每當任務狀態有更新時都會觸發。
|
onUploadStart(file) | 當文件即將開始上傳時立即觸發 |
onUploadSuccess(file, data, response) |
當文件上傳成功時觸發
|
方法名稱 | 說明 | 應用舉例 |
cancel(fileID, suppressEvent) |
取消隊列中的任務,不管此任務是否已經開始上傳
|
<ahref="javascript:$(‘#file_upload’).uploadify(‘cancel’)">取消第一個</a> <ahref="javascript:$(‘#file_upload’).uploadify(‘cancel’,‘*’)">清空隊列</a> <ahref="javascript:$(‘#file_upload’).uploadify(‘upload’,‘*’)">開始上傳所有任務</a> |
destroy() | 銷燬Uploadify實例並將文件上傳按鈕恢復到原始狀態 | <ahref="javascript:$(‘#file_upload’).uploadify(‘destroy’)">銷燬Uploadify實例</a> |
disable(setDisabled) |
禁用或啓用文件瀏覽按鈕 setDisabled – 設置爲true表示禁用,false爲啓用 |
<ahref="javascript:$(‘#file_upload’).uploadify(‘disable’,true)">禁用按鈕</a> <ahref="javascript:$(‘#file_upload’).uploadify(‘disable’,false)">啓用按鈕</a> |
settings(name, value, resetObjects) |
獲取或設置Uploadify實例參數
|
$(‘#file_upload’).uploadify(‘settings’,'buttonText’,'BROWSE’); $(‘#file_upload’).uploadify(‘settings’,'buttonText’)); |
stop() | 停止當前正在上傳的任務 |
<ahref="javascript:$(‘#file_upload’).uploadify(‘upload’,‘*’)">開始上傳</a> <ahref="javascript:$(‘#file_upload’).uploadify(‘stop’)">停止上傳</a> |
upload(fileID) | 立即上傳指定的文件,如果fileID爲’*'表示上傳所有文件,要指定上傳多個文件,則將每個文件的fileID作爲一個參數 | <ahref="javascript:$(‘#file_upload’).uploadify(‘upload’,'*’)">開始上傳所有文 |
例子:
html
<tr class="uploadSuccess" style="display: none;">
<th>已經上傳的報告:</th>
<td colspan="3" class="uploadCls">
<ul id="fileUl"></ul>
</td>
</tr>
<tr>
<th>事故相關報告:</th>
<td colspan="3" style="padding-left: 20px; padding-right: 15px;">
<div class="loadText">請點擊右側按鈕選擇上傳相關報告</div>
<div class="loadFile">
<input type="button" name="uploadify" id="uploadify" />
</div>
</td>
</tr>
</table>
<div id="fileQueue0"></div>
<div class="btnArea">
<a href="javascript:void(0);" class="add-btn startBtn"><span>上傳</span></a>
<a href="javascript:void(0);" class="clear-btn clearBtn"><span>取消</span></a>
</div>
js
$(function(){
var downUrl = '${contextPath}/epoch/file/download.do?id=';
//上傳文件
$("#uploadify").uploadify({
swf : '${contextPath }/js/uploadify/uploadify.swf',
uploader : '${contextPath }/epoch/file/upload.do;jsessionid=${cookie.JSESSIONID.value}',
width : 60,
buttonText : "瀏覽",
button_action : SWFUpload.BUTTON_ACTION.SELECT_FILE,
auto : false,
queueID :'fileQueue0',
fileSizeLimit : 50*1024,
onUploadSuccess : function(file,data,response){ //當每一個文件上傳成功時觸發
$(".uploadSuccess").fadeIn();
var childLi = $("<li><input type='hidden' name='attachments' value='"+data+"'><a class=\"curfile\" title=\'"
+ file.name+ "\' href=\"javascript:void(0);\" οnclick=\"openPrewViewFile(\'"+data+"\')\">"+file.name+"<span class='delete'></span></a></li>");
var fileUl = $("#fileUl");
fileUl.append(childLi);
$('.delete', childLi).click(function(){
var id = $('input:hidden', $(this).parents('li:first')).val();
var parentTd = $(this).parents('li:first');
parentTd.remove();
return false;
});
// 隱藏
removeFile(file);
},
onDialogClose : function(filesSelected) {//當文件選擇對話框關閉時觸發
if(filesSelected && filesSelected.queueLength > 0 ){
toggleBtn(true);
}
},
onCancel: function(file) {
removeFile(file);
},
onQueueComplete:function(){
toggleBtn(false);
}
});
toggleBtn(false);
//上傳按鈕
$(".startBtn").click(function() {
$("#uploadify").uploadify('upload','*');
});
//取消按鈕
$(".clearBtn").click(function() {
$("#uploadify").uploadify('cancel','*');
toggleBtn(false);
$('#fileQueue0').empty();
});
});
function toggleBtn(visible){
if(visible){
$('.btnArea').css("display","block");
}else{
$('.btnArea').css("display","none");
}
}
function removeFile(file){
$('#'+file.id).remove();
// 判斷queueID中是否還有文件,如果沒有了,取消顯示按鈕
len = $('#'+$("#uploadify").uploadify('settings','queueID')).children().length;
if(len < 1){
toggleBtn(false);
}
}