首頁 > 開發者 > JavaScript
AspNet中使用JQuery上傳外掛程式Uploadify詳解
Uploadify是JQuery的一個上傳外掛程式，實現的效果非常不錯，帶進度顯示。不過官方提供的執行個體時php版本的，本文將詳細介紹Uploadify在Aspnet中的使用
首先按下面的步驟來實現一個簡單的上傳功能。
1 建立Web項目，命名為JQueryUploadDemo，從官網上下載最新的版本解壓後添加到項目中。
2 在項目中添加UploadHandler.ashx檔案用來處理檔案的上傳。
3 在項目中添加UploadFile檔案夾，用來存放上傳的檔案。
進行完上面三步後項目的基本結構如:
4 Default.aspx的html頁的代碼修改如下：
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<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方法代碼如下：
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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 運行後效果如：
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檔案”，開啟檔案選擇框效果如：
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 ：選擇檔案到檔案隊列中後的每一個檔案上的關閉按鈕表徵圖，如：
上面介紹的key值的value都為字串或是布爾類型，比較簡單，接下來要介紹的key值的value為一個函數，可以在選擇檔案、出錯或其他一些操作的時候返回一些資訊給使用者。
onInit : 做一些初始化的工作。
onSelect ：選擇檔案時觸發，該函數有三個參數
event:事件對象。
queueID：檔案的唯一標識，由6為隨機字元組成。
fileObj：選擇的檔案對象，有name、size、creationDate、modificationDate、type 5個屬性。
代碼如下：
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$(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值，如下面代碼
?
| 1 |
$('#uploadify').uploadifySettings('folder','JS'); |
如果上傳按鈕的事件寫成下面這樣，檔案將會上傳到uploadifySettings定義的目錄中
?
| 1 2 |
<a href="javascript:$('#uploadify').uploadifySettings('folder','JS'); $('#uploadify').uploadifyUpload()">上傳</a> |
uploadifyCancel：該函數接受一個queueID作為參數，可以取消檔案隊列中指定queueID的檔案。
?
| 1 |
$('#uploadify').uploadifyCancel(id); |
花了一個晚上，終於寫完了，對JQuery這個上傳外掛程式也基本瞭解了，希望對大家有所協助，不對之處還望大家指正。
以上所述就是本文的全部內容了，希望大家能夠喜歡。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
