jquery上傳文件控件Uploadify

基於jquery的文件上傳控件，支持ajax無刷新上傳，多個文件同時上傳，上傳進行進度顯示，刪除已上傳文件。

要求使用jquery1.4或以上版本，flash player 9.0.24以上。

有兩個版本，一個用flash,一個是html5。html5的須要付費~因此這裏只說flash版本的用法。

 

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

控件截圖：

用法：

首先引用下面的文件

<link rel="stylesheet" type="text/css" href="uploadify.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>

建立一個file input，或者其它任何帶ID的元素，並對其初始化Uploadify（注意目錄下要有uploadify.swf這個文件，和uploadify.php後臺文件，路徑按項目中的目錄結構）

<input type="file" name="file_upload" id="file_upload" /> <script> 　$(function(){ 　　 $('#file_upload').uploadify({ 　　 'swf' :'uploadify.swf', 　　　 'uploader':'uploadify.php' 　　 // Put your options here  　　　}); 　　　}); </script>

這樣子就完成了一個最基礎的上傳組建。基本原理是改變你建立的file input生成一個DOM結構，建立一個DIV按鈕，按鈕樣式修改在uploadify.css文件中的.uploadify-button，將swf文件定位在按鈕上面，這樣當你點擊按鈕時實際上點擊的是swf

Options:

$('#file_upload').uploadify({
                auto:false, //接受true or false兩個值，當爲true時選擇文件後會自動上傳；爲false時只會把選擇的文件增長進隊列但不會上傳，這時只能使用upload的方法觸發上傳。不設置auto時默認爲true buttonClass: "some-class", //設置上傳按鈕的class buttonCursor: 'hand', //設置鼠標移到按鈕上的開狀，接受兩個值'hand'和'arrow'(手形和箭頭) buttonImage: 'img/browse-btn.png', //設置圖片按鈕的路徑（當你的按鈕是一張圖片時）。若是使用默認的樣式，你還能夠建立一個鼠標懸停狀態，但要把兩種狀態的圖片放在一塊兒，而且默認的放上面，懸停狀態的放在下面（原文好難表達啊：you can create a hover state for the button by stacking the off state above the hover state in the image）。這只是一個比較便利的選項，最好的方法仍是把圖片寫在CSS裏面。 buttonText: '<div>選擇文件</div>', //設置按鈕文字。值會被看成html渲染，因此也能夠包含html標籤 checkExisting: '/uploadify/check-exists.php', //接受一個文件路徑。此文件檢查正要上傳的文件名是否已經存在目標目錄中。存在時返回1，不存在時返回0(應該主要是做爲後臺的判斷吧)，默認爲false debug: false, //開啓或關閉debug模式 fileObjName:'filedata', //設置在後臺腳本使用的文件名。舉個例子，在php中，若是這個選項設置爲'the_files',你可使用$_FILES['the_files']存取這個已經上傳的文件。 fileSizeLimit:'100MB', //設置上傳文件的容量最大值。這個值能夠是一個數字或者字符串。若是是字符串，接受一個單位（B,KB,MB,GB）。若是是數字則默認單位爲KB。設置爲0時表示不限制 fileTypeExts: '*.*', //設置容許上傳的文件擴展名（也就是文件類型）。但手動鍵入文件名能夠繞過這種級別的安全檢查，因此你應該始終在服務端中檢查文件類型。輸入多個擴展名時用分號隔開('*.jpg;*.png;*.gif') fileTypeDesc: 'All Files', //可選文件的描述。這個值出如今文件瀏覽窗口中的文件類型下拉選項中。（chrome下不支持，會顯示爲'自定義文件',ie and firefox下可顯示描述）  formData: { timestamp: '<?php echo $timestamp;?>', token: '<?php echo md5('unique_salt' . $timestamp);?>' }, //經過get或post上傳文件時，此對象提供額外的數據。若是想動態設置這些值，必須在onUploadStartg事件中使用settings的方法設置。在後臺腳本中使用 $_GET or $_POST arrays (PHP)存取這些值。看官網參考寫法：http://www.uploadify.com/documentation/uploadify/formdata/ height: 30, //設置按鈕的高度(單位px)，默認爲30.(不要在值裏寫上單位，而且要求一個整數，width也同樣) width: 120, //設置按鈕寬度(單位px)，默認120 itemTemplate:false, //模板對象。給增長到上傳隊列中的每一項指定特殊的html模板。模板格式請看官網http://www.uploadify.com/documentation/uploadify/itemtemplate/ method:'post', //提交上傳文件的方法，接受post或get兩個值，默認爲post multi: false, //設置是否容許一次選擇多個文件，true爲容許，false不容許  overrideEvents: [], //重寫事件，接受事件名稱的數組做爲參數。所設置的事件將能夠被用戶重寫覆蓋 preventCaching:true, //是否緩存swf文件。默認爲true，會給swf的url地址設置一個隨機數，這樣它就不會被緩存。(有些瀏覽器緩存了swf文件就會觸發不了裏面的事件--by rainweb) progressData: 'percentage', //設置文件上傳時顯示數據，有‘percentage’ or ‘speed’兩個參數(百分比和速度) queueID: false, //設置上傳隊列DOM元素的ID，上傳的項目會增長進這個ID的DOM中。設置爲false時則會自動生成隊列DOM和ID。默認爲false queueSizeLimit: 999, //設置每一次上傳隊列中的文件數量。注意並非限制總的上傳文件數量（那是uploadLimit）.若是增長進隊列中的文件數量超出這個值，將會觸發onSelectError事件。默認值爲999 removeCompleted: true, //是否移除掉隊列中已經完成上傳的文件。false爲不移除 removeTimeout: 3, //設置上傳完成後刪除掉文件的延遲時間，默認爲3秒。若是removeCompleted爲false的話，就沒意義了 requeueErrors: false, //設置上傳過程當中由於出錯致使上傳失敗的文件是否從新加入隊列中上傳 successTimeout: 30, //設置文件上傳後等待服務器響應的秒數，超出這個時間，將會被認爲上傳成功，默認爲30秒 swf: 'uploadify.swf', //swf的相對路徑，必寫項 uploader: 'uploadify.php' //服務器端腳本文件路徑，必寫項 uploadLimit: 999 //上傳文件的數量。達到或超出這數量會觸發onUploadError方法。默認999 })

 Events:

$('#file_upload').uploadify({    
                onCancel: function(file){ console.log('The file'+ file.name + 'was cancelled.') }, //文件被移除出隊列時觸發,返回file參數 onClearQueue: function(queueItemCount){ console.log(queueItemCount+'file(s) were removed frome the queue') }, //當調用cancel方法且傳入'*'這個參數的時候觸發，其實就是移除掉整個隊列裏的文件時觸發，上面有說cancel方法帶*時取消整個上傳隊列 onDestroy: function(){ //調用destroy方法的時候觸發  }, onDialogClose: function(queueData){ console.log(queueData.filesSelected+'\n'+queueData.filesQueued+'\r\n'+queueData.filesReplaced+'\r\n'+queueData.filesCancelled+'\r\n'+ queueData.filesErrored) }, //關閉掉瀏覽文件對話框時觸發。返回queueDate參數，有如下屬性： /* filesSelected 瀏覽文件對話框中選取的文件數量 filesQueued 加入上傳隊列的文件數 filesReplaced 被替換的文件個數 filesCancelled 取消掉即將加入隊列中的文件個數 filesErrored 返回錯誤的文件個數 */ onDialogOpen:function(){ //打開選擇文件對話框時觸發  }, onDisable:function(){ //禁用uploadify時觸發(經過disable方法)  }, onEnalbe: function(){ //啓用uploadify時觸發(經過disable方法)  }, onFallback:function(){ //在初始化時檢測不到瀏覽器有兼容性的flash版本時實觸發  }, onInit: function(instance){ console.log('The queue ID is'+ instance.settings.queueID) }, //每次初始化一個隊列時觸發，返回uploadify對象的實例 onQueueComplete:function(queueData){ console.log(queueData.uploadsSuccessful+'\n'+queueData.uploadsErrored) }, //隊列中的文件都上傳完後觸發，返回queueDate參數，有如下屬性： /* uploadsSuccessful 成功上傳的文件數量 uploadsErrored 出現錯誤的文件數量 */ onSelect: function(file){ console.log(file.name) }, //選擇每一個文件增長進隊列時觸發，返回file參數 onSelectError: function(file,errorCode,errorMsg){ console.log(errorCode) console.log(this.queueData.errorMsg) }, //選擇文件出錯時觸發，返回file,erroCode,errorMsg三個參數 /* errorCode是一個包含了錯誤碼的js對象，用來查看事件中發送的錯誤碼，以肯定錯誤的具體類型，可能會有如下的常量： QUEUE_LIMIT_EXCEEDED:-100 選擇的文件數量超過設定的最大值； FILE_EXCEEDS_SIZE_LIMIT:-110 文件的大小超出設定 INVALID_FILETYPE:-130 選擇的文件類型跟設置的不匹配 errorMsg 完整的錯誤信息，若是你不重寫默認的事件處理器，可使用‘this.queueData.errorMsg’ 存取完整的錯誤信息 */ onSWFReady: function(){ //swf動畫加載完後觸發，沒有參數  }, onUploadComplete: function(file){ //在每個文件上傳成功或失敗以後觸發，返回上傳的文件對象或返回一個錯誤，若是你想知道上傳是否成功，最後使用onUploadSuccess或onUploadError事件  }, onUploadError: function(file,errorCode,erorMsg,errorString){ }, //一個文件完成上傳但返回錯誤時觸發，有如下參數 /* file 完成上傳的文件對象 errorCode 返回的錯誤代碼 erorMsg 返回的錯誤信息 errorString 包含全部錯誤細節的可讀信息 */ onUploadProgress: function(file,bytesUploaded,bytesTotal,totalBytesUploaded,totalBytesTotal){ $('#pregress').html('總共須要上傳'+bytesTotal+'字節，'+'已上傳'+totalBytesTotal+'字節') }, //每更新一個文件上傳進度的時候觸發,返回如下參數 /* file 正上傳文件對象 bytesUploaded 文件已經上傳的字節數 bytesTotal 文件的總字節數 totalBytesUploaded 在當前上傳的操做中（全部文件）已上傳的總字節數 totalBytesTotal 全部文件的總上傳字節數 */ onUploadStart: function(file){ console.log('start update') }, //每一個文件即將上傳前觸發 onUploadSuccess: function(file,data,respone){ alert( 'id: ' + file.id
　 + ' - 索引: ' + file.index
　　　　　　　　　　　　　　　　+ ' - 文件名: ' + file.name
　　　　　　　　　　　　　　　　+ ' - 文件大小: ' + file.size
　　　　　　　　　　　　　　　　+ ' - 類型: ' + file.type
　　　　　　　　　　　　　　　　+ ' - 建立日期: ' + file.creationdate
　　　　　　　　　　　　　　　　+ ' - 修改日期: ' + file.modificationdate
　　　　　　　　　　　　　　　　+ ' - 文件狀態: ' + file.filestatus
　　　　　　　　　　　　　　　　+ ' - 服務器端消息: ' + data
　　　　　　　　　　　　　　　　+ ' - 是否上傳成功: ' + response); } //每一個文件上傳成功後觸發 }) 

Methods：
Uploadify使用jquery推薦的插件模式，這意味着全部方法的調用都保持在一個命名空間裏。 調用這些不一樣的方法，只須要把方法當成第一個參數傳進uploadify裏調用就行。在這些方法後面增長參數會被傳進這個方法裏（這兩句翻譯得不是很順暢，附原文： To use the different method calls, simply call Uploadify on the DOM element with the method call as the first argument.Any additional arguments added after the method name are passed to the method.）

cancel：取消第一個上傳的文件，若是後面帶參數"*"則是取消掉整個上傳隊列，如$(el).uploadify('cancel', '*')

upload：上傳第一個上傳的文件，若是後面帶參數"*"則上傳整個隊列，跟cancel同樣

destroy：移除掉上傳組建，按html默認的方法上傳

disable：有true or false 兩個參數，表示是否禁止上傳按鈕，true表示禁止，false表示容許上傳

settings：返回或者更新一個實例的方法值，接受一個方法名的參數時是返回那個方法的值，當後面再跟一個參數，則是更新那個方法的值。如

$(el).uploadify('settings','buttonText','BROWSE'); //設置buttonText的值爲BROWSE $(el).uploadify('settings','buttonText') //返回buttonText的值

stop：中止正在上傳中的文件或隊列

 

下載demo

翻譯到中間的時候才發原來網上早已有中文API跟其它的例子，這裏附帶幾個，也是我參考着翻譯的資料

http://wenku.baidu.com/view/9df6ce0bde80d4d8d15a4faa.html

http://wenku.baidu.com/view/87df2673a417866fb84a8efd.html

http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html

http://www.cnblogs.com/luohu/archive/2011/12/16/2290135.html