JQuery上傳插件Uploadify使用詳解
Uploadify是JQuery的一個上傳插件，實現的效果非常不錯，帶進度顯示。不過官方提供的實例時php版本的，本文將詳細介紹Uploadify在Aspnet中的使用，您也可以點擊下面的鏈接進行演示或下載。
<html xmlns="; <head runat="server"> <title>Uploadify</title> <link href="JS/jquery.uploadify-v2.1.0/example/css/default.css" rel="stylesheet" type="text/css" /> <link href="JS/jquery.uploadify-v2.1.0/uploadify.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script> <script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script></head></pre>
注：文件包里有兩個js分別是：jquery.uploadify.js 和 jquery.uploadify.min.js，兩者其實一樣，只需載入其中一個js即可。很明顯jquery.uploadify.min.js是封裝好了的，開發人員推薦使用前者。
Options選項設置
auto：設置為true當選擇文件后就直接上傳了，為false需要點擊上傳按鈕才上傳 。
buttonClass：給“瀏覽按鈕”加css的class樣式
buttonCursor：鼠標移上去形狀：arrow箭頭、hand手型（默認）
buttonImage：瀏覽按鈕的圖片的路徑 ，鼠標移上去變換圖片
buttonText：瀏覽按鈕的文本，默認值：BROWSE 。
checkScript ：用來判斷上傳選擇的文件在服務器是否存在的后臺處理程序的相對路徑
checkExisting：在目錄中檢查文件是否已上傳成功（1 ture,0 false）
cancelImg ：選擇文件到文件隊列中后的每一個文件上的關閉按鈕圖標，如下圖：
debug：是否顯示調試框（默認不顯示false）
folder ： 上傳文件存放的目錄 。
fileDesc ： 這個屬性值必須設置fileExt屬性后才有效，用來設置選擇文件對話框中的提示文本，如設置fileDesc為“請選擇rar doc pdf文件”，打開文件選擇框效果如下圖：
fileExt ： 設置可以選擇的文件的類型，格式如：'*.doc;*.pdf;*.rar' 。
fileDataName ：設置一個名字，在服務器處理程序中根據該名字來取上傳文件的數據。默認為Filedata
fileObjName：設置一個名字，在服務器處理程序中根據該名字來取上傳文件的數據。默認為Filedata，$tempFile = $_FILES['Filedata']['tmp_name']
fileSizeLimit：設置允許上傳文件最大值B, KB, MB, GB 比如：'fileSizeLimit' : '20MB'
fileTypeDesc：選擇的文件的描述。這個字符串出現在瀏覽文件對話框中文件類型下拉框處。默認：All Files
fileTypeExts：允許上傳的文件類型。格式：'fileTypeExts' : '*.gif; *.jpg; *.png'
formData：附帶值，需要通過get or post傳遞的額外數據，需要結合onUploadStart事件一起使用
height： 設置“瀏覽按鈕”高度px ，默認值：30。
hideButton ： 設置為true則隱藏瀏覽按鈕的圖片 。
itemTemplate：<itemTemplate>節點表示顯示的內容。這些內容中也可以包含綁定到控件DataSource屬性中元素集合的數據。
method：提交方式Post 或Get 默認為Post
multi：選擇文件時是否可以【選擇多個】。默認：可以true
overrideEvents：不執行默認的onSelect事件
preventCaching：隨機緩存值 默認true ，可選true和false.如果選true,那么在上傳時會加入一個隨機數來使每次的URL都不同,以防止緩存.但是可能與正常URL產生沖突
progressData：進度條上顯示的進度:有百分比percentage和速度speed。默認百分比
queueID：文件隊列的ID，該ID與存放文件隊列的div的ID一致。給“進度條”加背景css的ID樣式。文件選擇后的容器ID
queueSizeLimit：當允許多文件生成時，設置選擇文件的個數，默認值：999 。
removeCompleted：上傳完成后隊列是否自動消失。默認：true
removeTimeout：上傳完成后隊列多長時間后消失。默認 3秒 需要：'removeCompleted' : true,時使用
requeueErrors：隊列上傳出錯，是否繼續回滾隊列，即反復嘗試上傳。默認：false
rollover ： 值為true和false，設置為true時當鼠標移到瀏覽按鈕上時有反轉效果。
sizeLimit ： 上傳文件的大小限制 。
simUploadLimit ： 允許同時上傳的個數 默認值：1 。
scriptAccess ：flash腳本文件的訪問模式，如果在本地測試設置為always，默認值：sameDomain
script ： 后臺處理程序的相對路徑 。默認值：uploadify.php
successTimeout：上傳超時時間。文件上傳完成后,等待服務器返回信息的時間(秒).超過時間沒有返回的話,插件認為返回了成功。 默認：30秒
swf：swf文件的路徑,本文件是插件自帶的,不可用其它的代替.本參數不可省略
uploader：uploadify.swf 文件的相對路徑，該swf文件是一個帶有文字BROWSE的按鈕，點擊后淡出打開文件對話框，默認值：uploadify.swf。
uploadLimit：限制總上傳文件數,默認是999。指同一時間，如果關閉瀏覽器后重新打開又可上傳。
width ：設置“瀏覽按鈕”寬度px ，默認值：110。
wmode ： 設置該項為transparent 可以使瀏覽按鈕的flash背景文件透明，并且flash文件會被置為頁面的最高層。 默認值：opaque 。
Events事件
onInit : 每次初始化一個隊列時觸發,做一些初始化的工作。
'onInit':function(){alert("1");}onSelect ：當文件從瀏覽框被添加到隊列中時觸發.選擇文件時觸發，該函數有三個參數
- event:事件對象。
- queueID：文件的唯一標識，由6為隨機字符組成。
- fileObj：選擇的文件對象，有name、size、creationDate、modificationDate、type 5個屬性。
代碼如下：
'onSelect': function(e, queueId, fileObj) { alert("唯一標識:" + queueId + "\r\n" + "文件名：" + fileObj.name + "\r\n" + "文件大小：" + fileObj.size + "\r\n" + "創建時間：" + fileObj.creationDate + "\r\n" + "最后修改時間：" + fileObj.modificationDate + "\r\n" + "文件類型：" + fileObj.type );當選擇一個文件后彈出的消息如下圖： </p> </strong>
onSelectOnce ：在單文件或多文件上傳時，選擇文件時觸發。該函數有兩個參數event，data，data對象有以下幾個屬性：
- fileCount：選擇文件的總數。
- filesSelected：同時選擇文件的個數，如果一次選擇了3個文件該屬性值為3。
- filesReplaced：如果文件隊列中已經存在A和B兩個文件，再次選擇文件時又選擇了A和B，該屬性值為2。
- allBytesTotal：所有選擇的文件的總大小。
onCancel : 當點擊文件隊列中文件的關閉按鈕或點擊取消上傳時觸發。該函數有event、queueId、fileObj、data四個參數，前三個參數同onSelect 中的三個參數，data對象有兩個屬性fileCount和allBytesTotal。
- fileCount：取消一個文件后，文件隊列中剩余文件的個數。
- allBytesTotal：取消一個文件后，文件隊列中剩余文件的大小。
onClearQueue ：清除隊列。當'cancel'方法帶著*參數時,也就是說一次全部取消的時候觸發.queueItemCount是被取消的文件個數（另外的按鈕）.當調用函數fileUploadClearQueue時觸發。有event和data兩個參數，同onCancel 中的兩個對應參數。
onQueueFull ：當設置了queueSizeLimit并且選擇的文件個數超出了queueSizeLimit的值時觸發。該函數有兩個參數event和queueSizeLimit。
onError ：當上傳過程中發生錯誤時觸發。該函數有event、queueId、fileObj、errorObj四個參數，其中前三個參數同上，errorObj對象有type和info兩個屬性。
- type：錯誤的類型，有三種‘HTTP’, ‘IO’, or ‘Security’
- info：錯誤的描述
onOpen ：點擊上傳時觸發，如果auto設置為true則是選擇文件時觸發，如果有多個文件上傳則遍歷整個文件隊列。該函數有event、queueId、fileObj三個參數，參數的解釋同上。
onProgress ：點擊上傳時觸發，如果auto設置為true則是選擇文件時觸發，如果有多個文件上傳則遍歷整個文件隊列，在onOpen之后觸發。該函數有event、queueId、fileObj、data四個參數，前三個參數的解釋同上。data對象有四個屬性percentage、bytesLoaded、allBytesLoaded、speed：
- percentage：當前完成的百分比
- bytesLoaded：當前上傳的大小
- allBytesLoaded：文件隊列中已經上傳完的大小
- speed：上傳速率 kb/s
onComplete：文件上傳完成后觸發。該函數有四個參數event、queueId、fileObj、response、data五個參數，前三個參數同上。response為后臺處理程序返回的值，在上面的例子中為1或0，data有兩個屬性fileCount和speed
- fileCount：剩余沒有上傳完成的文件的個數。
- speed：文件上傳的平均速率 kb/s
注：fileObj對象和上面講到的有些不太一樣，onComplete 的fileObj對象有個filePath屬性可以取出上傳文件的路徑。
onAllComplete：文件隊列中所有的文件上傳完成后觸發。該函數有event和data兩個參數，data有四個屬性，分別為：
- filesUploaded :上傳的所有文件個數。
- errors ：出現錯誤的個數。
- allBytesLoaded ：所有上傳文件的總大小。
- speed ：平均上傳速率 kb/s
onDestroy：取消所有的上傳隊列（另外的按鈕）
onDialogClose：當選擇文件對話框關閉時觸發,不論是點的'確定'還是'取消'都會觸發.如果本事件被添加進了'overrideEvents'參數中,那么如果在選擇文件時產生了錯誤,不會有錯誤提示框彈出
onDialogOpen：當選擇文件框被打開時觸發,沒有傳過來的參數
onEnable：開啟上傳
onDisable：關閉上傳
onFallback：檢測FLASH失敗調用
onQueueComplete：當隊列中的所有文件上傳完成時觸發
onSelectError：選擇文件出錯時觸發
onSWFReady：flash準備好時觸發
onUploadComplete：當一個文件上傳完成時觸發
onUploadError：當文件上傳完成但是返回錯誤時觸發
onUploadProgress：上傳匯總
onUploadStart：一個文件上傳之間觸發（動態改變參數的值，此方法很重要，當在多文件跨服務器上傳時，你要給每個文件賦值不同的OnlyKey，即修改formData數據，服務器上的文件和數據庫的OnlyKey一致，必須用到此方法）
onUploadSuccess：每個上傳完成并成功的文件都會觸發本事件
uploadifySettings：可以動態修改上面介紹的那些key值，如下面代碼
$('#uploadify').uploadifySettings('folder','JS');如果上傳按鈕的事件寫成下面這樣，文件將會上傳到uploadifySettings定義的目錄中
<a href="javascript:$('#uploadify').uploadifySettings('folder','JS'); $('#uploadify').uploadifyUpload()">上傳</a>uploadifyCancel：該函數接受一個queueID作為參數，可以取消文件隊列中指定queueID的文件。</strong> </p>
$('#uploadify').uploadifyCancel(id);
Methods方法
cancel：取消一個上傳隊列
destroy：取消所有上傳隊列
disable：禁止點擊“瀏覽按鈕”
settings：返回或修改一個 uploadify實例的settings值
stop：停止當前的上傳并重新添加到隊列中去
upload：上傳指定的文件或者所有隊列中的文件
uploadify多文件上傳例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>uploadify 多文件上傳例子</title> <script src=".haha { color: #FFFFFF; }
queue {
background-color: #FFF; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); height: 103px; margin-bottom: 10px; overflow: auto; padding: 5px 10px; width: 300px;} </style> </head>
<body> <h1>Uploadify Demo</h1> <form> <div id="queue"></div> <input id="file_upload" name="file_upload" type="file" multiple="true"> </form> <script type="text/javascript"> $(function() { $('#file_upload') .uploadify( {
'debug' : false, 'auto' : true, //是否自動上傳,
'buttonClass' : 'haha', //按鈕輔助class
'buttonText' : '上傳圖片', //按鈕文字
'height' : 30, //按鈕高度
'width' : 100, //按鈕寬度
'checkExisting' : 'check-exists.php',//是否檢測圖片存在,不檢測:false
'fileObjName' : 'files', //默認 Filedata, $_FILES控件名稱
'fileSizeLimit' : '1024KB', //文件大小限制 0為無限制 默認KB
'fileTypeDesc' : 'All Files', //圖片選擇描述
'fileTypeExts' : '.gif; .jpg; .png',//文件后綴限制 默認：'.*'
'formData' : { 'someKey' : 'someValue', 'someOtherKey' : 1 },//傳輸數據JSON格式
// 'formData' :{ 'albumid':$("#albumid").val() },
//'overrideEvents' : ['onUploadProgress'], // The progress will not be updated
//'progressData' : 'speed', //默認percentage 進度顯示方式
'queueID' : 'queue', //默認隊列ID
'queueSizeLimit' : 20, //一個隊列上傳文件數限制
'removeCompleted' : true, //完成時是否清除隊列 默認true
'removeTimeout' : 3, //完成時清除隊列顯示秒數,默認3秒
'requeueErrors' : false, //隊列上傳出錯，是否繼續回滾隊列
'successTimeout' : 5, //上傳超時
'uploadLimit' : 99, //允許上傳的最多張數
'swf' : 'uploadify.swf', //swfUpload
'uploader' : 'uploadify.php', //服務器端腳本//修改formData數據 'onUploadStart' : function(file) { //$("#file_upload").uploadify("settings", "someOtherKey", 2); }, 'onUploadStart' : function(file) { // $("#perpic").uploadify("settings","formData",{"albumid":$("#albumid").val()}); }, //刪除時觸發 'onCancel' : function(file) { //alert('The file ' + file.name + '--' + file.size + ' was cancelled.'); }, //清除隊列 'onClearQueue' : function(queueItemCount) { //alert(queueItemCount + ' file(s) were removed from the queue'); }, //調用destroy是觸發 'onDestroy' : function() { alert('我被銷毀了'); }, //每次初始化一個隊列是觸發 'onInit' : function(instance) { //alert('The queue ID is ' + instance.settings.queueID); }, //上傳成功 'onUploadSuccess' : function(file, data, response) { //alert(file.name + ' | ' + response + ':' + data); }, //上傳錯誤 'onUploadError' : function(file, errorCode, errorMsg, errorString) { //alert('The file ' + file.name + ' could not be uploaded: ' + errorString); }, //上傳匯總 'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) { $('#progress').html( totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.'); }, //上傳完成 'onUploadComplete' : function(file) { //alert('The file ' + file.name + ' finished processing.'); }, }); }); //變換按鈕 function changeBtnText() { $('#file_upload').uploadify('settings', 'buttonText', '繼續上傳'); } //返回按鈕 function returnBtnText() { alert('The button says ' + $('#file_upload').uploadify('settings', 'buttonText')); } </script> <h4>操作:</h4> <a href="javascript:$('#file_upload').uploadify('upload', '*');">開始上傳</a> | <a href="javascript:$('#file_upload').uploadify('cancel', '*');">清除隊列</a> | <a href="javascript:$('#file_upload').uploadify('destroy');">銷毀上傳</a> | <a href="javascript:$('#file_upload').uploadify('disable', true);">禁用上傳</a> | <a href="javascript:$('#file_upload').uploadify('disable', false);">激活上傳</a> | <a href="javascript:$('#file_upload').uploadify('stop');">停止上傳</a> | <a href="changeBtnText();">變換按鈕</a> | <h4>大小:</h4> <div id='progress'></div></body> </html></pre>
</strong>
