JQuery上傳插件Uploadify使用詳解

時間  2019-11-12
標籤 jquery 上傳 插件 uploadify 使用 詳解 欄目 JQuery 简体版
原文   原文鏈接

Uploadify是JQuery的一個上傳插件，實現的效果很是不錯，帶進度顯示。不過官方提供的實例時php版本的，本文將詳細介紹Uploadify在Aspnet中的使用，您也能夠點擊下面的連接進行演示或下載。javascript

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

1 建立Web項目，命名爲JQueryUploadDemo，從官網上下載最新的版本解壓後添加到項目中。css

2 在項目中添加UploadHandler.ashx文件用來處理文件的上傳。html

3 在項目中添加UploadFile文件夾，用來存放上傳的文件。java

進行完上面三步後項目的基本結構以下圖:jquery

2010-01-05_094439

4 Default.aspx的html頁的代碼修改以下：web

<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方法代碼以下：json

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文件夾中會增長這兩個文件。ide

上面簡單地實現了一個上傳的功能，依靠函數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

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

花了一個晚上，終於寫完了，對JQuery這個上傳插件也基本瞭解了，但願對你們有所幫助，不對之處還望你們指正。

源碼下載

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程