萬盛學電腦網 >> 腳本專題 >> javascript >> AspNet中使用JQuery上傳插件Uploadify詳解
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為隨機字符組
