jQuery上傳插件Uploadify使用幫助

 

Uploadify是JQuery的一個上傳插件，實現的效果非常不錯，帶進度顯示。它的功能特色總結如下：

1. 支持單文件或多文件上傳，可控制並發上傳的文件數
2. 在服務器端支持各種語言與之配合使用，諸如PHP,.NET,Java……
3. 通過參數可配置上傳文件類型及大小限制
4. 通過參數可配置是否選擇文件后自動上傳
5. 易於擴展，可控制每一步驟的回調函數（onSelect, onCancel……）
6. 通過接口參數和CSS控制外觀

使用幫助：

     官網地址：http://www.uploadify.com/ 

     官方參數配置文檔：http://www.uploadify.com/documentation/ 

     官方下載地址：http://www.uploadify.com/download/

 

使用方法：

1. 官網下載插件安裝包，添加必要文件（加紅點的）到項目中；如果是.net 可以使用Nuget命令在項目中安裝：Install-Package Uploadfy
   1. 
   2. 主要文件介紹：jquery.uploadify.js（完成上傳功能的腳本文件，在調用頁面引用，min是壓縮版）、uploadify.css（外觀樣式表）、uploader.swf（上傳控件的主體文件，flash控件）、uploadify-cancel.png（關閉按鈕的小圖片），其他的文件都不是必須的，可以忽略。
2. 頁面添加引用：

       <link href="~/Scripts/uploadify/uploadify.css" rel="stylesheet" />
       <script src="~/Scripts/jquery-1.8.2.min.js"></script>
       <script src="~/Scripts/uploadify/jquery.uploadify-3.2.min.js"></script>

    

3. 頁面標簽：  <input id="uploadfy" type="file" name="uploadfy"/>
4. 調用Uploadfy綁定上傳事件：

       <script>
           $(function() {
               $("#uploadfy").uploadify({
                   'swf': '/Scripts/uploadify/uploadify.swf',//uploadify.swf 文件的路徑（絕對路徑、相對路徑都可以）
                   uploader: '/Home/File',//服務器響應地址
                   cancelImg: '/Scripts/uploadify/uploadify-cancel.png',//關閉按鈕圖片路徑
                   multi: true,//是否多文件
                   auto:true,//是否自動上傳，true，選擇文件后上傳，false，點擊上傳開始上傳，默認true
                   buttonText: "上傳文件",//空間名稱
                   preventCaching: false,//是否緩存
                   fileSizeLimit: 1024 * 1024 * 10,//單個文件限制大小
                   fileTypeDesc: '*.jpg;*.png;*.doc;*.txt;*.zip;*.rar;',//文件后綴描述
                   fileTypeExts: '*.jpg;*.png;*.doc;*.txt;*.zip;*.rar;',//文件后綴限制
                   height: 20,//高度
                   onUploadSuccess: function (file, data, response) {//上傳成功后事件
                       if (data == "success") {//data 返回值自己在后端自定義
                           //自己的代碼
                       }
                   }
               });
   
           });
       </script>

    

5. 服務端，和普通上傳文件一樣，沒什么特別的，就略去了；

 

 

Uploadfy的屬性以、事件和方法介紹：

 

一、屬性

屬性名稱	默認值	說明
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’,'*’)">開始上傳所

 

 表格借用自：http://www.cnblogs.com/yangy608/p/3915349.html