Uploadify 3.2 引數屬性、事件、方法函式詳解

武文博KevinLM發表於2017-06-22
事件函式
一、屬性
屬性名稱 預設值 說明
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, or GB)為單位，比如’2MB’；

如果設定為0則表示無限制
fileTypeDesc ‘All Files’ 這個屬性值必須設定fileTypeExts屬性後才有效，用來設定選擇檔案對話方塊中的提示文字，如設定fileTypeDesc為“請選擇rar doc 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物件包含如下屬性：

  • filesSelected 檔案選擇對話方塊中共選擇了多少個檔案
  • filesQueued 已經向佇列中新增了多少個檔案
  • filesReplaced 已經向佇列中替換了多少個檔案
  • filesCancelled 取消了多少個檔案 filesErrored 出錯了多少個檔案
onDialogOpen() 當檔案選擇對話方塊彈出時立即出發，但可能在檔案選擇對話方塊被關閉之前並不能全部執行。
onDisable() 當disable方法禁用Uploadify上傳按鈕時被呼叫時觸發。
onEnable() 當disable方法啟用Uploadify上傳按鈕時被呼叫時觸發。
onFallback() 當Uploadify初始化過程中檢測到當前瀏覽器不支援flash時觸發。
onInit() 首次初始化Uploadify結束時觸發。
onQueueComplete(queueData)

檔案上傳佇列處理完畢後觸發。

queueData物件包含如下屬性：

  • uploadsSuccessful – 上傳成功的檔案數量
  • uploadsErrored – 上傳失敗的檔案數量
onSelect(file)

選擇檔案後向佇列中新增每個上傳任務時都會觸發。
onSelectError(file, errorCode, errorMsg)

選擇檔案後向佇列中新增每個上傳任務時如果失敗都會觸發。

file – 檔案物件

errorCode – 錯誤程式碼如下：

  • QUEUE_LIMIT_EXCEEDED – 任務數量超出佇列限制；
  • FILE_EXCEEDS_SIZE_LIMIT – 檔案大小超出限制；
  • ZERO_BYTE_FILE – 檔案大小為0
  • INVALID_FILETYPE – 檔案型別不符合要求

errorMsg – 錯誤提示，可通過’this.queueData.errorMsg’定製
onSWFReady() Flash檔案載入成功後觸發。
onUploadComplete(file) 每個檔案上傳完畢後無論成功與否都會觸發。
onUploadError(file, errorCode, errorMsg, errorString) 檔案上傳出錯時觸發，引數由服務端程式返回。
onUploadProgress(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal)

處理上傳佇列的過程中會多次觸發此事件，每當任務狀態有更新時都會觸發。

  • file – 檔案物件
  • bytesUploaded – 已上傳的位元組數
  • bytesTotal – 檔案總位元組數
  • totalBytesUploaded – 當前任務佇列中全部檔案已上傳的總位元組數
  • totalBytesTotal – 當前任務佇列中全部檔案的總位元組數
onUploadStart(file) 當檔案即將開始上傳時立即觸發
onUploadSuccess(file, data, response)

當檔案上傳成功時觸發

  • file – 檔案物件
  • data – 服務端輸出返回的資訊
  • response – 有輸出時為true,如果無響應為false，如果返回的是false,當超過successTimeout設定的時間後假定為true
三、方法
方法名稱 說明 應用舉例
cancel(fileID, suppressEvent)

取消佇列中的任務，不管此任務是否已經開始上傳

  • fileID – 要取消的檔案ID，如果為空則取消佇列中第一個任務，如果為’*'則取消所有任務
  • suppressEvent – 是否阻止觸發onUploadCancel事件，當清空佇列時非常實用。

<a href="javascript:$(‘#file_upload’).uploadify(‘cancel’)">取消第一個</a>

<a href="javascript:$(‘#file_upload’).uploadify(‘cancel’, ‘*’)">清空佇列</a>

<a href="javascript:$(‘#file_upload’).uploadify(‘upload’, ‘*’)">開始上傳所有任務</a>
destroy() 銷燬Uploadify例項並將檔案上傳按鈕恢復到原始狀態 <a href="javascript:$(‘#file_upload’).uploadify(‘destroy’)">銷燬Uploadify例項</a>
disable(setDisabled)

禁用或啟用檔案瀏覽按鈕

setDisabled – 設定為true表示禁用，false為啟用

<a href="javascript:$(‘#file_upload’).uploadify(‘disable’, true)">禁用按鈕</a>

<a href="javascript:$(‘#file_upload’).uploadify(‘disable’, false)">啟用按鈕</a>
settings(name, value, resetObjects)

獲取或設定Uploadify例項引數

  • name – 屬性名稱，如果只提供屬性名稱則表示獲取其值
  • value – 屬性值
  • resetObjects – 設定為true時，更新postData物件將清空現有的值。否則，新的值將被新增到其末尾。

$(‘#file_upload’).uploadify(‘settings’,'buttonText’,'BROWSE’);

$(‘#file_upload’).uploadify(‘settings’,'buttonText’));
stop() 停止當前正在上傳的任務

<a href="javascript:$(‘#file_upload’).uploadify(‘upload’, ‘*’)">開始上傳</a>

<a href="javascript:$(‘#file_upload’).uploadify(‘stop’)">停止上傳</a>
upload(fileID) 立即上傳指定的檔案，如果fileID為’*'表示上傳所有檔案，要指定上傳多個檔案，則將每個檔案的fileID作為一個引數 <a href="javascript:$(‘#file_upload’).uploadify(‘upload’,'*’)">開始上傳所有文

關於無法在formData獲取到值得解決辦法：在動態設定setting裡設定就可以了，還是不知道是什麼原因在直接配置檔案裡獲取不到值。 另外如果將上傳檔案資訊儲存在session裡要注意遍歷的時候會有一點BUG，直接迴圈寫入資料庫會多出一組，原因暫時不明。

轉自：http://blog.sina.com.cn/s/blog_5079086b0101fkmh.html


---------------------------------------------------------------------------------------------------

Web上傳檔案是一個很常用的功能，試用過不少上傳元件，要麼是每次只能選擇一個檔案，要麼是選擇了檔案後不能取消，直接上傳，要麼就是對檔案、佇列等限制支援不佳。面對這麼多問題，Uploadify外掛全部都能實現。
Uploadify是一個jQuery外掛，你可以很容易的為你的網站新增多個檔案上傳功能。它有兩個不同的版本（HTML5和Flash）允許你靈活選擇為您的網站實現各種場景下的功能和需求。它的優點如下：
多檔案上傳
    Uploadify的主要好處是它允許多個檔案上傳，支援ctrl多選
支援拖放檔案
    檔案上傳的html5版本（uploadifive）允許拖放檔案到佇列，實現拖放上傳
支援上傳進度
    當檔案被上傳時，進度條顯示當前的上傳進度，多個檔案分別顯示各個檔案的上傳進度
自定義上傳限制
    設定檔案大小限制，檔案計數限制，檔案型別限制，同時上傳限制，確保我們的伺服器安全
最大程度定製化
    Uploadify幾乎各方面功能都可以完全定製，這樣你就可以根據具體需要，自由地建立你確實需要的uploader。
當然Uploadify也有缺陷，比如很多瀏覽器預設是禁用flash的，也不支援斷點上傳等，實現程式碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
$(function() {
    $("#file_upload_1").uploadify({
        height        : 30,//高度
        swf           : '/uploadify/uploadify.swf',//指定swf檔案
        uploader      : '/uploadify/uploadify.php',//後臺處理的url
        width         : 120,//寬度
        buttonText: '上傳圖片', //按鈕顯示的文字
        fileTypeExts:  '*.*',//上傳檔案的型別,預設為所有檔案,多個型別使用;分割'*.gif; *.jpg; *.png'
        fileTypeDesc: 'Image Files',//可選擇檔案的描述,在瀏覽視窗底部的檔案型別下拉選單中顯示的文字
        formData: {'someKey':'someValue','someOtherKey':1},//傳送給後臺的其他引數通過formData指定
        //上傳檔案頁面中，你想要用來作為檔案佇列的元素的id, 預設為false,自動生成,不帶#
        queueID: 'fileQueue',
        auto: true,//選擇檔案後自動上傳
        multi: true,//設定為true將允許多檔案上傳
        buttonClass:'xttblog',//上傳按鈕的樣式
        buttonImage:'',//按鈕的圖片路徑
        buttonCursor:'hand',//滑鼠指標懸停在按鈕上的樣子
        checkExisting:false,//檔案的路徑，檢查目標資料夾中是否已上載的檔案的名稱.如果檔名不存在,該指令碼將返回1,如果檔名存在或0
        debug:true,//開啟swfupload除錯模式
        fileObjName:'',//後臺獲取檔案物件
        fileSizeLimit:'',//允許檔案上傳的最大大小.這個值可以是數字或字串.如果它是一個字串,它接受一個單位(B,KB,MB,GB)
        //預設單位為KB。您可以將此值設定為0,無限制
        itemTemplate:'',//選擇不同的HTML模板,新增上傳檔案到上傳佇列。主要有4種模板:
        //instanceID(uploadify例項id)、fileID(檔案id)、fileName(檔名字)、fileSize(檔案大小).例如：${fileName}
        method:'POST',//POST或GET
        overrideEvents:['onUploadProgress'],//重寫事件,onUploadProgress進度條不更新
        preventCaching:true,//是否快取,預設為true不快取
        progressData:'percentage',//進度條percentage百分百、speed上傳速度更新,預設為percentage
        queueID:false,//預設為false佇列id動態生成,可以為DOM元素的id,設定佇列樣式
        queueSizeLimit:999,//佇列大小預設為999，超過將觸發onselecterror事件,和uploadLimit類似
        removeCompleted:true,//預設為true上傳完成後是否刪除上傳佇列
        removeTimeout:3,//上傳完成後,延遲3秒刪除佇列
        requeueErrors:true,//預設為false,如果為true上傳失敗後將繼續嘗試再次上傳
        successTimeout:30,//檔案上傳成功後服務端應返回成功標誌，此項設定返回結果的超時時間
        uploadLimit:999,//最大上傳檔案數量，如果達到或超出此限制將會觸發onUploadError事件
        onCancel : function(file) {
            //移除檔案時觸發
        },
        onClearQueue:function(queueItemCount){
            //當呼叫函式cancel方法時觸發，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時觸發
        },
        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
        }
    });
});

uploadify方法用法詳解：
1.cancel(fileID, suppressEvent) 取消佇列中的任務，不管此任務是否已經開始上傳
    fileID要取消的檔案ID，如果為空則取消佇列中第一個任務，如果為'*'則取消所有任務
    suppressEvent是否阻止觸發onUploadCancel事件，當清空佇列時非常實用
    $('#file_upload').uploadify('cancel')取消第一個
    $('#file_upload').uploadify('cancel','*')清空佇列
2.destroy()銷燬Uploadify例項並將檔案上傳按鈕恢復到原始狀態
    $('#file_upload').uploadify('destroy')銷燬Uploadify例項
3.disable(setDisabled)禁用或啟用檔案瀏覽按鈕
    setDisabled – 設定為true表示禁用，false為啟用
    $('#file_upload').uploadify('disable',true)禁用按鈕
4.settings(name, value, resetObjects)獲取或設定Uploadify例項引數
    name – 屬性名稱，如果只提供屬性名稱則表示獲取其值
    value – 屬性值
    resetObjects – 設定為true時，更新postData物件將清空現有的值。否則，新的值將被新增到其末尾
    $('#file_upload').uploadify('settings','buttonText','BROWSE');
    $('#file_upload').uploadify('settings','buttonText'));
5.stop()停止當前正在上傳的任務    
    $('#file_upload').uploadify('stop')停止上傳
6.upload(fileID)立即上傳指定的檔案
    如果fileID為’*'表示上傳所有檔案，要指定上傳多個檔案，則將每個檔案的fileID作為一個引數
    $('#file_upload').uploadify('upload','*')開始上傳所有檔案

相關文章