jquery檔案上傳控件 Uploadify
轉自：http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html
基于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