jQuery上傳外掛Uploadify使用詳解

oec2003發表於2013-06-28
jQuery

　　Uploadify是JQuery的一個上傳外掛，實現的效果非常不錯，帶進度顯示。不過官方提供的例項時php版本的，本文將詳細介紹Uploadify在Aspnet中的使用，您也可以點選下面的連結進行演示或下載。

　　首先按下面的步驟來實現一個簡單的上傳功能。

　　1、建立Web專案，命名為JQueryUploadDemo，從官網上下載最新的版本解壓後新增到專案中。

　　2、在專案中新增UploadHandler.ashx檔案用來處理檔案的上傳。

　　3、在專案中新增UploadFile資料夾，用來存放上傳的檔案。

　　進行完上面三步後專案的基本結構如下圖:

2010-01-05_094439

　　4、Default.aspx的html頁的程式碼修改如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Uploadify</title>
    <link href="JS/jquery.uploadify-v2.1.0/example/css/default.css"
     rel="stylesheet" type="text/css" />
    <link href="JS/jquery.uploadify-v2.1.0/uploadify.css"
     rel="stylesheet" type="text/css" />

    <script type="text/javascript"
     src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script>

    <script type="text/javascript"
     src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script>

    <script type="text/javascript"
   src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>

    <script type="text/javascript">
        $(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
            });
        });  
    </script>

</head>
<body>
    <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>
</body>
</html>

　　5、UploadHandler類的ProcessRequest方法程式碼如下：

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";   
    context.Response.Charset = "utf-8";   

    HttpPostedFile file = context.Request.Files["Filedata"];   
    string  uploadPath = 
        HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\";  

    if (file != null)  
    {  
       if (!Directory.Exists(uploadPath))  
       {  
           Directory.CreateDirectory(uploadPath);  
       }   
       file.SaveAs(uploadPath + file.FileName);  
        //下面這句程式碼缺少的話，上傳成功後上傳佇列的顯示不會自動消失
       context.Response.Write("1");  
    }   
    else  
    {   
        context.Response.Write("0");   
    }  
}

　　6、執行後效果如下圖：

2010-01-05_095617

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

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

　　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檔案”，開啟檔案選擇框效果如下圖：

2010-01-05_220920

　　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 ：選擇檔案到檔案佇列中後的每一個檔案上的關閉按鈕圖示，如下圖：

2010-01-05_220626

　　上面介紹的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
            );

        }
    });
});

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

2010-01-05_225323

　　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

　　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);

相關文章