Uploadify特點

Uploadify簡單說來，是基於Jquery的一款檔案上傳外掛。它的功能特色總結如下：

1. 支援單檔案或多檔案上傳，可控制併發上傳的檔案數
2. 在伺服器端支援各種語言與之配合使用，諸如PHP,.NET,Java……
3. 通過引數可配置上傳檔案型別及大小限制
4. 通過引數可配置是否選擇檔案後自動上傳
5. 易於擴充套件，可控制每一步驟的回撥函式（onSelect, onCancel……）
6. 通過介面引數和CSS控制外觀

如何使用Uploadify

1、下載Uploadify外掛

• 官方下載
• 官方文件
• 官方演示

2、在網頁中引入外掛的檔案

<link href="JS/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="JS/swfobject.js"></script>
<script type="text/javascript" src="JS/jquery.uploadify.v2.1.0.min.js"></script>

3、編寫一些上傳相關的HTML程式碼

<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
<p>
    <a href="javascript:$('#uploadify').uploadifyUpload()">上傳</a>| 
    <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上傳</a>
</p>

4、使用JavaScript庫jQuery呼叫Uploadify外掛

<script type="text/javascript">
$(document).ready(function(){
    $("#uploadify").uploadify({
        'uploader': 'JS/uploadify.swf',
        'script': 'UploadHandler.ashx',
        'cancelImg': 'JS/cancel.png',
        'folder': 'UploadFile',
        'queueID': 'fileQueue',
        'auto': false,
        'multi': true
    });
});  
</script>

執行後效果如下圖

選擇了兩個檔案後，點選上傳，就可以看到UploadFile資料夾中會增加這兩個檔案。

上面簡單地實現了一個上傳的功能，依靠函式uploadify實現，uploadify函式的引數為json格式，可以對json物件的key值的 修改來進行自定義的設定，如multi設定為true或false來控制是否可以進行多檔案上傳，下面就來介紹下這些key值的意思。

Uploadify引數介紹

uploader ： uploadify.swf 檔案的相對路徑，該swf檔案是一個帶有文字BROWSE的按鈕，點選後淡出開啟檔案對話方塊，預設值：uploadify.swf。
script ：   後臺處理程式的相對路徑 。預設值：uploadify.php
checkScript ：用來判斷上傳選擇的檔案在伺服器是否存在的後臺處理程式的相對路徑
fileDataName ：設定一個名字，在伺服器處理程式中根據該名字來取上傳檔案的資料。預設為Filedata
method ： 提交方式Post 或Get 預設為Post
scriptAccess ：flash指令碼檔案的訪問模式，如果在本地測試設定為always，預設值：sameDomain
folder ：  上傳檔案存放的目錄 。
queueID ： 檔案佇列的ID，該ID與存放檔案佇列的div的ID一致。
queueSizeLimit ： 當允許多檔案生成時，設定選擇檔案的個數，預設值：999 。
multi ： 設定為true時可以上傳多個檔案。
auto ： 設定為true當選擇檔案後就直接上傳了，為false需要點選上傳按鈕才上傳 。
fileDesc ： 這個屬性值必須設定fileExt屬性後才有效，用來設定選擇檔案對話方塊中的提示文字，如設定fileDesc為“請選擇rar doc pdf檔案”，開啟檔案選擇框效果如下圖：

fileExt ： 設定可以選擇的檔案的型別，格式如：’*.doc;*.pdf;*.rar’ 。
sizeLimit ： 上傳檔案的大小限制 。
simUploadLimit ： 允許同時上傳的個數 預設值：1 。
buttonText ： 瀏覽按鈕的文字，預設值：BROWSE 。
buttonImg ： 瀏覽按鈕的圖片的路徑 。
hideButton ： 設定為true則隱藏瀏覽按鈕的圖片 。
rollover ： 值為true和false，設定為true時當滑鼠移到瀏覽按鈕上時有反轉效果。
width ： 設定瀏覽按鈕的寬度 ，預設值：110。
height ： 設定瀏覽按鈕的高度 ，預設值：30。
wmode ： 設定該項為transparent 可以使瀏覽按鈕的flash背景檔案透明，並且flash檔案會被置為頁面的最高層。 預設值：opaque 。
cancelImg ：選擇檔案到檔案佇列中後的每一個檔案上的關閉按鈕圖示，如下圖：

Uploadify函式介紹

上面介紹的key值的value都為字串或是布林型別，比較簡單，接下來要介紹的key值的value為一個函式，可以在選擇檔案、出錯或其他一些操作的時候返回一些資訊給使用者。

onInit : 做一些初始化的工作。

onSelect ：選擇檔案時觸發，該函式有三個引數

• event:事件物件。
• queueID：檔案的唯一標識，由6為隨機字元組成。
• fileObj：選擇的檔案物件，有name、size、creationDate、modificationDate、type 5個屬性。

程式碼如下：

$(document).ready(function()
{
    $("#uploadify").uploadify({
        'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
        'script': 'UploadHandler.ashx',
        'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
        'folder': 'UploadFile',
        'queueID': 'fileQueue',
        'auto': false,
        'multi': true,
        'onInit':function(){alert("1");},
        '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
            );

        }
    });
});

當選擇一個檔案後彈出的訊息如下圖：

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 ：當呼叫函式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

其它相關函式介紹

在上面的例子中已經用了uploadifyUpload和uploadifyClearQueue兩個函式，除此之外還有幾個函式：

uploadifySettings：可以動態修改上面介紹的那些key值，如下面程式碼

$('#uploadify').uploadifySettings('folder','JS');

如果上傳按鈕的事件寫成下面這樣，檔案將會上傳到uploadifySettings定義的目錄中

<a href="javascript:$('#uploadify').uploadifySettings('folder','JS');
$('#uploadify').uploadifyUpload()">上傳</a>

uploadifyCancel：該函式接受一個queueID作為引數，可以取消檔案佇列中指定queueID的檔案。

$('#uploadify').uploadifyCancel(id);