query上傳插件uploadify參數詳細分析

Uploadify?Version 3.2

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

注：文件包里有兩個js分別是：jquery.uploadify.js 和 jquery.uploadify.min.js，兩者其實一樣，只需載入其中一個js即可。很明顯jquery.uploadify.min.js是封裝好了的，開發人員推薦使用前者。

Options選項設置

auto??? 選擇文件后自動上傳
buttonClass??? 給“瀏覽按鈕”加css的class樣式
buttonCursor??? 鼠標移上去形狀：arrow箭頭、hand手型（默認）
buttonImage??? 鼠標移上去變換圖片
buttonText??? 按鈕文字
checkExisting??? 在目錄中檢查文件是否已上傳成功（1 ture,0 false）
debug??? ??? 是否顯示調試框（默認不顯示false）
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
itemTemplate??? <itemTemplate>節點表示顯示的內容。這些內容中也可以包含綁定到控件DataSource屬性中元素集合的數據。
method??? ??? 上傳方式。默認：post
multi??? ??? 選擇文件時是否可以【選擇多個】。默認：可以true
overrideEvents??? 不執行默認的onSelect事件
preventCaching??? 隨機緩存值默認true ，可選true和false.如果選true,那么在上傳時會加入一個隨機數來使每次的URL都不同,以防止緩存.但是可能與正常URL產生沖突
progressData??? 進度條上顯示的進度:有百分比percentage和速度speed。默認百分比
queueID??? ??? 給“進度條”加背景css的ID樣式。文件選擇后的容器ID
queueSizeLimit??? 允許多文件上傳的數量。默認：999
removeCompleted??? 上傳完成后隊列是否自動消失。默認：true
removeTimeout??? 上傳完成后隊列多長時間后消失。默認 3秒??? 需要：'removeCompleted' : true,時使用
requeueErrors??? 隊列上傳出錯，是否繼續回滾隊列，即反復嘗試上傳。默認：false
successTimeout??? 上傳超時時間。文件上傳完成后,等待服務器返回信息的時間(秒).超過時間沒有返回的話,插件認為返回了成功。默認：30秒
swf??? ??? swf文件的路徑,本文件是插件自帶的,不可用其它的代替.本參數不可省略
uploader??? 上傳處理程序URL，本參數不可省略
uploadLimit??? 限制總上傳文件數,默認是999。指同一時間，如果關閉瀏覽器后重新打開又可上傳。
width??? ??? “瀏覽按鈕”寬度px

Events 事件
onCancel??? 當取消一個上傳隊列中的文件時觸發,刪除時觸發?
onClearQueue??? 清除隊列。當'cancel'方法帶著*參數時,也就是說一次全部取消的時候觸發.queueItemCount是被取消的文件個數（另外的按鈕）
onDestroy??? 取消所有的上傳隊列（另外的按鈕）
onDialogClose??? 當選擇文件對話框關閉時觸發,不論是點的'確定'還是'取消'都會觸發.如果本事件被添加進了'overrideEvents'參數中,那么如果在選擇文件時產生了錯誤,不會有錯誤提示框彈出
onDialogOpen??? 當選擇文件框被打開時觸發,沒有傳過來的參數
onDisable??? 關閉上傳
onEnable??? 開啟上傳
onFallback??? 檢測FLASH失敗調用
onInit??? ??? 每次初始化一個隊列時觸發
onQueueComplete??? 當隊列中的所有文件上傳完成時觸發
onSelect??? 當文件從瀏覽框被添加到隊列中時觸發
onSelectError??? 選擇文件出錯時觸發
onSWFReady??? flash準備好時觸發
onUploadComplete當一個文件上傳完成時觸發
onUploadError??? 當文件上傳完成但是返回錯誤時觸發
onUploadProgress上傳匯總
onUploadStart??? 一個文件上傳之間觸發（動態改變參數的值，此方法很重要，當在多文件跨服務器上傳時，你要給每個文件賦值不同的OnlyKey，即修改formData數據，服務器上的文件和數據庫的OnlyKey一致，必須用到此方法）

onUploadSuccess??? 每個上傳完成并成功的文件都會觸發本事件

Methods 方法
cancel??? ??? 取消一個上傳隊列
destroy??? ??? 取消所有上傳隊列
disable??? ??? 禁止點擊“瀏覽按鈕”
settings??? 返回或修改一個 uploadify實例的settings值
stop??? ??? 停止當前的上傳并重新添加到隊列中去
upload??? ??? 上傳指定的文件或者所有隊列中的文件

uploadify多文件上傳例子：

1. <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">???
2. <html?xmlns="http://www.w3.org/1999/xhtml">???
3. <head>???
4. <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">???
5. <title>uploadify?多文件上傳例子</title>???
6. <script?src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"?type="text/javascript"></script>???
7. <script?src="jquery.uploadify-3.1.min.js"?type="text/javascript"></script>???
8. <link?rel="stylesheet"?type="text/css"?href="uploadify.css">???
9. <style?type="text/css">???
10. body?{???
11. ????font:?13px?Arial,?Helvetica,?Sans-serif;???
12. }???
13. .haha{???
14. ????color:#FFFFFF;???
15. }???
16. #queue?{???
17. ????background-color:?#FFF;???
18. ????border-radius:?3px;???
19. ????box-shadow:?0?1px?3px?rgba(0,0,0,0.25);???
20. ????height:?103px;???
21. ????margin-bottom:?10px;???
22. ????overflow:?auto;???
23. ????padding:?5px?10px;???
24. ????width:?300px;???
25. }???
26. </style>???
27. </head>???
28. ???
29. ???
30. <body>???
31. ????<h1>Uploadify?Demo</h1>???
32. ????<form>???
33. ????????<div?id="queue"></div>???
34. ????????<input?id="file_upload"?name="file_upload"?type="file"?multiple="true">???
35. ????</form>???
36. ???????
37. ????<script?type="text/javascript">???
38. ????????$(function()?{???
39. ????????????$('#file_upload').uploadify({???
40. ????????????????'debug'?????????:?false,???
41. ????????????????'auto'??????????:?true,?????????????//是否自動上傳,???
42. ????????????????'buttonClass'???:?'haha',???????????//按鈕輔助class???
43. ????????????????'buttonText'????:?'上傳圖片',???????//按鈕文字???
44. ????????????????'height'????????:?30,???????????????//按鈕高度???
45. ????????????????'width'?????????:?100,??????????????//按鈕寬度???
46. ????????????????'checkExisting'?:?'check-exists.php',//是否檢測圖片存在,不檢測:false???
47. ????????????????'fileObjName'???:?'files',???????????//默認?Filedata,?$_FILES控件名稱???
48. ????????????????'fileSizeLimit'?:?'1024KB',??????????//文件大小限制?0為無限制?默認KB???
49. ????????????????'fileTypeDesc'??:?'All?Files',???????//圖片選擇描述???
50. ????????????????'fileTypeExts'??:?'*.gif;?*.jpg;?*.png',//文件后綴限制?默認：'*.*'???
51. ????????????????'formData'??????:?{'someKey'?:?'someValue',?'someOtherKey'?:?1},//傳輸數據JSON格式???
52. // 'formData':{ 'albumid':$("#albumid").val() },????????????????
53. //'overrideEvents':?['onUploadProgress'],??//?The?progress?will?not?be?updated???
54. ????????????????//'progressData'?:?'speed',?????????????//默認percentage?進度顯示方式???
55. ????????????????'queueID'???????:?'queue',??????????????//默認隊列ID???
56. ????????????????'queueSizeLimit':?20,???????????????????//一個隊列上傳文件數限制???
57. ????????????????'removeCompleted'?:?true,???????????????//完成時是否清除隊列?默認true???
58. ????????????????'removeTimeout'???:?3,??????????????????//完成時清除隊列顯示秒數,默認3秒???
59. ????????????????'requeueErrors'???:?false,??????????????//隊列上傳出錯，是否繼續回滾隊列???
60. ????????????????'successTimeout'??:?5,??????????????????//上傳超時???
61. ????????????????'uploadLimit'?????:?99,?????????????????//允許上傳的最多張數???
62. ????????????????'swf'??:?'uploadify.swf',?//swfUpload???
63. ????????????????'uploader':?'uploadify.php',?//服務器端腳本???
64. ???
65. ???
66. ????????????????//修改formData數據???
67. ????????????????'onUploadStart'?:?function(file)?{???
68. ????????????????????//$("#file_upload").uploadify("settings",?"someOtherKey",?2);???
69. ????????????????},
70. //'onUploadStart' : function(file) { // $("#perpic").uploadify("settings","formData",{"albumid":$("#albumid").val()}); // },???
71. ????????????????//刪除時觸發???
72. ????????????????'onCancel'?:?function(file)?{???
73. ????????????????????//alert('The?file?'?+?file.name?+?'--'?+?file.size?+?'?was?cancelled.');???
74. ????????????????},???
75. ????????????????//清除隊列???
76. ????????????????'onClearQueue'?:?function(queueItemCount)?{???
77. ????????????????????//alert(queueItemCount?+?'?file(s)?were?removed?from?the?queue');???
78. ????????????????},???
79. ????????????????//調用destroy是觸發???
80. ????????????????'onDestroy'?:?function()?{???
81. ????????????????????alert('我被銷毀了');???
82. ????????????????},???
83. ????????????????//每次初始化一個隊列是觸發???
84. ????????????????'onInit'?:?function(instance){???
85. ????????????????????//alert('The?queue?ID?is?'?+?instance.settings.queueID);???
86. ????????????????},???
87. ????????????????//上傳成功???
88. ????????????????'onUploadSuccess'?:?function(file,?data,?response)?{???
89. ????????????????????//alert(file.name?+?'?|?'?+?response?+?':'?+?data);???
90. ????????????????},???
91. ????????????????//上傳錯誤???
92. ????????????????'onUploadError'?:?function(file,?errorCode,?errorMsg,?errorString)?{???
93. ????????????????????//alert('The?file?'?+?file.name?+?'?could?not?be?uploaded:?'?+?errorString);???
94. ????????????????},???
95. ????????????????//上傳匯總???
96. ????????????????'onUploadProgress'?:?function(file,?bytesUploaded,?bytesTotal,?totalBytesUploaded,?totalBytesTotal)?{???
97. ????????????????????$('#progress').html(totalBytesUploaded?+?'?bytes?uploaded?of?'?+?totalBytesTotal?+?'?bytes.');???
98. ????????????????},???
99. ????????????????//上傳完成???
100. ????????????????'onUploadComplete'?:?function(file)?{???
101. ????????????????????//alert('The?file?'?+?file.name?+?'?finished?processing.');???
102. ????????????????},???
103. ????????????????
104. ????????????});???
105. ????????});???
106. ???
107. ???
108. ????????//變換按鈕???
109. ????????function?changeBtnText()?{???
110. ????????????$('#file_upload').uploadify('settings','buttonText','繼續上傳');???
111. ????????}???
112. ???
113. ???
114. ????????//返回按鈕???
115. ????????function?returnBtnText()?{???
116. ????????????alert('The?button?says?'?+?$('#file_upload').uploadify('settings','buttonText'));???
117. ????????}???
118. ????</script>???
119. ????<h4>操作:</h4>????
120. ????<a?href="javascript:$('#file_upload').uploadify('upload',?'*');">開始上傳</a>??|????
121. ????<a?href="javascript:$('#file_upload').uploadify('cancel',?'*');">清除隊列</a>??|????
122. ????<a?href="javascript:$('#file_upload').uploadify('destroy');">銷毀上傳</a>??|????
123. ????<a?href="javascript:$('#file_upload').uploadify('disable',?true);">禁用上傳</a>??|????
124. ????<a?href="javascript:$('#file_upload').uploadify('disable',?false);">激活上傳</a>??|????
125. ????<a?href="javascript:$('#file_upload').uploadify('stop');">停止上傳</a>??|????
126. ????<a?href="changeBtnText();"< /span>>變換按鈕</a>??|????
127. ????<h4>大小:</h4>???
128. ????<div?id='progress'></div>????
129. </body>???
130. </html>??