什么是Uploadify
原文：Uploadify is a jQuery plugin that integrates a fully-customizable multiple file upload utility on your website. It uses a mixture of Javascript, ActionScript, and any server-side language to dynamically create an instance over any DOM element on a page.
譯文：Uploadify是一個jQuery插件，集成了一個完全可定制的多個文件上傳您的網站上的效用。它混合使用的Javascript，ActionScript，和任何服務器端語言來動態創建的任何一個頁面上的DOM元素的一個實例。
原文: Uploadify was born out of the need for a multiple file upload utility for a CMS that was being developed. After evaluating the other available options, RonnieSan decided the best option was to build a new plug-in and make it available to the development community. In order to make the plug-in easy to implement and highly-customizable, the jQuery format was chosen. After word got out, the popularity of the plug-in spawned the need for a dedicated site. Travis Nickels volunteered his help to refine the Uploadify plug-in and make it what it is today.
譯文:CMS開發后，需要實現多文件上傳功能，這樣，Uploadify這個實用工具誕生了。經過評過其他可用選項，RonnieSan決定創建一個新的插件提供給開發社區。為了使這個插件容易實施，並可高度定制，最后選擇了Jquery.消息傳出后，這個插件的普及，使其需要一個專門的網站來提供支持。Travis Nickels自告奮勇的去幫助和完善Uploadify插件。這就是我們今天看到的這個網站。
Uplodify的特點
| Features |
特點 |
| <!--[if !supportLists]-->· <!--[endif]-->jQuery Implementation |
Jquery支持 |
| <!--[if !supportLists]-->· <!--[endif]-->Multiple File Upload Capabilities |
多文件上傳功能 |
| <!--[if !supportLists]-->· <!--[endif]-->SWFObject Integration |
SWFObject集成 |
| <!--[if !supportLists]-->· <!--[endif]-->Compatibility with Popular Server-Side Languages |
流行的服務器端語言功能 |
| <!--[if !supportLists]-->· <!--[endif]-->Highly-Customizable |
高定制性 |
| <!--[if !supportLists]-->· <!--[endif]-->Large Support Community |
強大的社區支持 |
| <!--[if !supportLists]-->· <!--[endif]-->Extensive Documentation with Examples |
擴展文檔和實例 |
怎么使用Uploadify
原文:Uploadify was created to be an easy-to-implement solution for multiple file uploads. As a jQuery plugin, the Uploadify implementation is simple and highly-customizable.
While it may require a foundational knowledge of jQuery to successfully implement, this documentation should provide a comprehensive enough reference for those who are having trouble. If you are running into issues that this documentation can't help solve, there is an active community of Uploadify users that can be accessed through the forums. In addition, we've provided a list of FAQs that may also aid in troubleshooting your Uploadify instance
譯文:
Uploadify是一個簡單易用的多文件上傳方案。作為一個Jquery插件，Uploadify使用簡單，並具有高度的定制性。
正常使用Uploadify插件需要一些Jquery基礎知識。為了減少使用問題，本文檔提供了足夠全面的參考知識。如果該文檔不能解決你在使用中遇到的問題，請訪問論壇(http://www.uploadify.com/forums/)獲取更多信息。此外，我們提供了常見問題列表，也許這些信息也能幫助你解決Uploadify在使用中遇到的問題。
| 最低需求 |
|
| jQuery 1.4.x or greater |
Jquery1.4及更高版本 |
| swfObject 2.2 or greater |
SwfObject2.2及以上版本 |
| Flash Player 9.0.24 or greater |
Flash Player 9.0.24及以上版本 |
示例代碼
頭文件引入
<link href="uploadify/uploadify.css" type="text/css" rel="Stylesheet" rev="Stylesheet" />
<script type="text/javascript" language="javascript" src="uploadify/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="uploadify/swfobject.js"></script>
<script type="text/javascript" language="javascript" src="uploadify/jquery.uploadify.v2.1.4.min.js"></script>
使用Uploadify插件需要引入uploadify.css、jquery.js、swfobjects.js、和uploadify.js等4個文件
HTML文件
<input type="file" id="up_file" />
如果只是實現簡單的文件上傳功能，只需要在body里，添加一個file。
Js代碼
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#up_file").uploadify({
'uploader': '/uploadify/uploadify/uploadify.swf',
'script': '/uploadify/UploadifyHandler.ashx',
'cancelImg': '/uploadify/uploadify/cancel.png',
'folder': '/upload',
'auto':true,
'multi':true
});
});
</script>
Ok,以上文件就可以實現一個文件上傳功能。
| 屬性 |
||
| 名稱 |
類型 |
描述 |
| auto |
boolean |
文件添加到上傳隊列后，自動進行上傳。默認為false |
| buttonImg |
string |
瀏覽按鈕的圖片路徑 |
| buttonText |
string |
瀏覽按鈕上顯示的文字(不支持中文，但是可以設置有中文的圖片) |
| cancelImg |
string |
文件上傳隊列中的取消按鈕圖片路徑 |
| checkScript |
string |
檢測服務器上已經存在的文件的服務器端腳本路徑 |
| displayData |
string |
文件上傳過程中，在該文件的隊列條目顯示的數據信息。默認是上傳的百分比(percentage),你可以改為”speed”,顯示文件上傳的平均速度。 |
| expressInstall |
string |
expressInstall.swf 的文件路徑，如果計算機不存在flash,則使用該選項初始化flash。 |
| fileDataName |
string |
服務器端腳本使用的文件數組名稱。默認為Filedata |
| fileDesc |
string |
<!--[if !supportLists]-->1. <!--[endif]-->該選項必須配合fileExt一起使用,他是文件類型選中顯示的內容，例如: <!--[if !supportLists]-->2. <!--[endif]-->'fileExt' : '*.jpg;*.gif;*.png', <!--[if !supportLists]-->3. <!--[endif]--> 'fileDesc' : 'Web Image Files (.JPG, .GIF, .PNG)' |
| fileExt |
string |
允許上傳的文件類型，使用分號(”;)”分割 例如:*.jpg;*.gif,默認為null(所有文件類型) |
| folder |
string |
上傳的文件保存路徑(文件夾目錄) |
| height |
integer |
瀏覽按鈕的高度 |
| hideButton |
boolean |
隱藏flash按鈕，這樣你就可以自己設置底層div元素的樣式了 |
| method |
string |
提交方式POST 和GET，默認是POST |
| multi |
boolean |
是否允許多文件上傳。默認為false |
| queueID |
string |
頁面上作為文件上傳隊列的元素的ID |
| queueSizeLimit |
integer |
允許上傳的文件數量上限.默認是999 |
| removeCompleted |
boolean |
文件上傳完成后，是否自動移除隊列中的文件。默認為true |
| rollover |
boolean |
如果設置為true,則鼠標移到瀏覽按鈕上后，會有翻轉效果 |
| script |
string |
服務器端處理文件上傳的腳本路徑 |
| scriptAccess |
string |
flash腳本文件的訪問模式，如果在本地測試設置為always.允許的選項: 'sameDomain' / 'always',默認是sameDomain. |
| scriptData |
JSON object with mixed types |
在文件上傳的過程中，scriptData選項允許發送額外的數據到服務器端腳本，你能像正常使用提交方式獲取值（request.Form[“scriptData variable”]）。同時，結合.uploadifySettings()方法，可以發送動態數據。 例如: 'scriptData' : {'firstName':'Ronnie','age':30} |
| simUploadLimit |
integer |
同時上傳文件的數量。默認為1 |
| sizeLimit |
integer |
允許上傳的文件大小(kb), 例如: 'sizeLimit' : 102400 |
| uploader |
string |
Uploadify.swf文件路徑 |
| width |
string |
瀏覽按鈕的寬度 |
| wmode |
String |
設置該項為transparent 可以使瀏覽按鈕的flash背景文件透明，並且flash文件會被置為頁面的最高層。 默認值：opaque |
| 事件 |
||
| onAllComplete |
function |
當隊列中所有文件上傳完成后觸發。 function(event,data) |
| onCancel |
function |
當隊列中的每個文件別移除時觸發 |
| onCheck |
function |
上傳開始前，如果發現有同名的文件存在則觸發該事件。 |
| onClearQueue |
function |
當uploadifyClearQueue()方法調用時觸發 |
| onComplete |
function |
當單個文件上傳完成后觸發 |
| onError |
function |
當單個文件上傳出錯時觸發 |
| onInit |
function |
當uploadify實例加載時觸發 |
事件
1、onAllComplete：當隊列中所有文件上傳完成后觸發。
示例
‘onAllComplete’:function(event,data){….}
event:事件對象(the event object)
data:包含上傳文件的詳細信息對象
| Data數據對象 |
|
| filesUploaded |
上傳了的文件的數量 |
| errors |
遇到的錯誤總數 |
| allBytesLoaded |
上傳的總字節數 |
| speed |
平均上傳速度(kb/s) |
2、onCancel:當隊列中的每個文件別移除時觸發
示例
‘onCancel’:function(event,ID,fileObj,data){…}
event:事件對象(the event object)
ID:被取消的文件的唯一標識
fileObj:選中文件的對象，他包含的屬性列表如下
| FileOjb屬性 |
|
| name |
文件名 |
| size |
文件大小(byte) |
| creationDate |
文件的創建日期 |
| modifiedDate |
文件最后一次修改日期 |
| type |
文件的擴展名<包含’.’> |
data：文件隊列詳細信息
| data屬性 |
|
| fileCount |
隊列中剩余文件的數量 |
| allBytesTotal |
隊列中剩余文件的大小(byte) |
3、onCheck: 上傳開始前，如果發現有同名的文件存在則觸發該事件。
示例：function(event,data,key)｛。。。。｝
event:事件對象(the event object)
data:包含服務器段所有文件名稱的一個列表。每個文件的關鍵字是隊列中的唯一標識。
key:用戶服務器段檢測的唯一標識
4、onClearQueue: 當uploadifyClearQueue()方法調用時觸發
示例:’onClearQueue’:function(event){….}
event:事件對象(the event object)
5、onComplete：當單個文件上傳完成后觸發
示例：’onComplete’:function(event,ID,fileObj,response,data){….}
event:事件對象(the event object)
ID:該文件在文件隊列中的唯一表示
fileObj:選中文件的對象，他包含的屬性列表如下
| FileOjb屬性 |
|
| name |
文件名 |
| filePath |
上傳服務器后的文件路徑 |
| size |
文件大小(byte) |
| creationDate |
文件的創建日期 |
| modifiedDate |
文件最后一次修改日期 |
| type |
文件的擴展名<包含’.’> |
response:服務器端返回的Response文本
data：文件隊列詳細信息和文件上傳的一般數據
| data屬性 |
|
| fileCount |
隊列中剩余文件的數量 |
| Speed |
上傳文件的平均速度(byte) |
6、onError：當單個文件上傳出錯時觸發
示例：’onError’:function(event,ID,fileObj,errorObj){…}
event:事件對象(the event object)
fileObj:選中文件的對象，他包含的屬性列表如下
| FileOjb屬性 |
|
| name |
文件名 |
| size |
文件大小(byte) |
| creationDate |
文件的創建日期 |
| modifiedDate |
文件最后一次修改日期 |
| type |
文件的擴展名<包含’.’> |
errorObj:返回的錯誤信息對象
| errorObj屬性 |
|
| type |
HTTP/IO/ Security 之一 |
| info |
描述返回錯誤類型的信息。 |
7、onInit: 當uploadify實例加載時觸發
示例:’onInit’:function(){…}
8、onOpen:文件開始上傳時觸發
示例:’onOpen’:function(event,ID,fileObj){…}
event:事件對象(the event object)
ID:開始上傳的文件在文件隊列中的唯一表示
fileObj:選中文件的對象，他包含的屬性列表如下
| FileOjb屬性 |
|
| name |
文件名 |
| size |
文件大小(byte) |
| creationDate |
文件的創建日期 |
| modifiedDate |
文件最后一次修改日期 |
| type |
文件的擴展名<包含’.’> |
9、onProgress: 點擊上傳時觸發，如果auto設置為true則是選擇文件時觸發，如果有多個文件上傳則遍歷整個文件隊列，在onOpen之后觸發。
示例：’onProgress’:function(event,ID,fileObj,data){…}
event:事件對象(the event object)
ID:正在上傳的文件在文件隊列中的唯一表示
fileObj:選中文件的對象，他包含的屬性列表如下
| FileOjb屬性 |
|
| name |
文件名 |
| size |
文件大小(byte) |
| creationDate |
文件的創建日期 |
| modifiedDate |
文件最后一次修改日期 |
| type |
文件的擴展名<包含’.’> |
data:上傳和隊列的信息對象。
| data屬性 |
|
| percentage |
文件上傳的百分比 |
| bytesLoaded |
已經上傳的字節數 |
| allBytesLoaded |
整個隊列中上傳的字節數 |
| speed |
上傳文件的平均速度(byte) |
10、onQueueFull: 當設置了queueSizeLimit並且選擇的文件個數超出了queueSizeLimit的值時觸發
示例:’onQueueFull’:function(event,queueSizeLimit){}
event:事件對象(the event object)
queueSizeLimit:上傳文件的最大數。queueSizeLimit屬性值。
11、onSelect: 選擇文件時觸發，
示例:’onSelect’:function(event,ID,fileObj){…}
event:事件對象(the event object)
ID:選中文件的唯一標識
fileObj:選中文件的對象，他包含的屬性列表如下
| FileOjb屬性 |
|
| name |
文件名 |
| size |
文件大小(byte) |
| creationDate |
文件的創建日期 |
| modifiedDate |
文件最后一次修改日期 |
| type |
文件的擴展名<包含’.’> |
12、onSelectOnce: 在單文件或多文件上傳時，選擇文件時觸發。
示例:’onSelectOnce’:function(event,data){…}
event:事件對象(the event object)
data:選擇的操作信息
| data屬性 |
|
| fileCount |
隊列中的文件數量 |
| filesSelected |
選擇文件操作中選中的文件數量 |
| filesReplaced |
隊列中被替換的文件數量 |
| allBytesTotal |
整個隊列中上傳的字節數 |
13、onSWFReady:當flash文件加載時觸發
示例:’onSWFReady’:function(){}
方法
<!--[if !supportLists]-->· <!--[endif]-->uploadify() 創建一個uploadify實例。
<!--[if !supportLists]-->· <!--[endif]-->uploadifyCancel() 從隊列中移除一個文件。如果文件正在上傳，則停止上傳，並在隊列中移除該文件。uploadifyCancel($(“. uploadifyQueueItem”).first().attr(“id”).replace(“頁面上的file的ID”,””));
<!--[if !supportLists]-->· <!--[endif]-->uploadifyClearQueue():取消文件上傳，並移除隊列中的所有文件。
<!--[if !supportLists]-->· <!--[endif]-->uploadifySettings():更改uploadify初始化時的選項uploadifySettings(‘buttonText’,’Browse’)
<!--[if !supportLists]-->· <!--[endif]-->uploadifyUpload()上傳文件:uploadifyUpload($(“. uploadifyQueueItem”).first().attr(“id”).replace(“頁面上的file的ID”,’’));
備注：由於官方給出的文件上傳用的是PHP語言文件。所以自己寫了一個.net的
附錄
<!--[if !supportLists]-->· <!--[endif]-->Uploadify的官方網站: http://www.uploadify.com/
<!--[if !supportLists]-->· <!--[endif]-->Uploadify的下載頁面: http://www.uploadify.com/download/
<!--[if !supportLists]-->· <!--[endif]-->Uploadify-V2.1.4 :http://www.uploadify.com/wp-content/uploads/uploadify-v2.1.4.zip
<!--[if !supportLists]-->· <!--[endif]-->幫助文檔: http://www.uploadify.com/documentation/
<!--[if !supportLists]-->· <!--[endif]-->常見問題: http://www.uploadify.com/faqs/
<!--[if !supportLists]-->· <!--[endif]-->Demo下載地址: http://dl.dbank.com/c08qsci31i
來自：http://www.cnblogs.com/msnbluesky/archive/2011/10/13/2210464.html