AspNet中使用JQuery上傳插件Uploadify詳解
首先按下面的步驟來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的上傳功能。
1 創(chuàng)建Web項(xiàng)目，命名為JQueryUploadDemo，從官網(wǎng)上下載最新的版本解壓后添加到項(xiàng)目中。
2 在項(xiàng)目中添加UploadHandler.ashx文件用來(lái)處理文件的上傳。
3 在項(xiàng)目中添加UploadFile文件夾，用來(lái)存放上傳的文件。
進(jìn)行完上面三步后項(xiàng)目的基本結(jié)構(gòu)如下圖:
4 Default.aspx的html頁(yè)的代碼修改如下：
<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);
//下面這句代碼缺少的話，上傳成功后上傳隊(duì)列的顯示不會(huì)自動(dòng)消失
context.Response.Write("1");
}
else
{
context.Response.Write("0");
}
}
6 運(yùn)行后效果如下圖：
7 選擇了兩個(gè)文件后，點(diǎn)擊上傳，就可以看到UploadFile文件夾中會(huì)增加這兩個(gè)文件。
上面簡(jiǎn)單地實(shí)現(xiàn)了一個(gè)上傳的功能，依靠函數(shù)uploadify實(shí)現(xiàn)，uploadify函數(shù)的參數(shù)為json格式，可以對(duì)json對(duì)象的key值的修改來(lái)進(jìn)行自定義的設(shè)置，如multi設(shè)置為true或false來(lái)控制是否可以進(jìn)行多文件上傳，下面就來(lái)介紹下這些key值的意思：
uploader ： uploadify.swf 文件的相對(duì)路徑，該swf文件是一個(gè)帶有文字BROWSE的按鈕，點(diǎn)擊后淡出打開(kāi)文件對(duì)話框，默認(rèn)值：uploadify.swf。
script ： 后臺(tái)處理程序的相對(duì)路徑 。默認(rèn)值：uploadify.php
checkScript ：用來(lái)判斷上傳選擇的文件在服務(wù)器是否存在的后臺(tái)處理程序的相對(duì)路徑
fileDataName ：設(shè)置一個(gè)名字，在服務(wù)器處理程序中根據(jù)該名字來(lái)取上傳文件的數(shù)據(jù)。默認(rèn)為Filedata
method ： 提交方式Post 或Get 默認(rèn)為Post
scriptAccess ：flash腳本文件的訪問(wèn)模式，如果在本地測(cè)試設(shè)置為always，默認(rèn)值：sameDomain
folder ： 上傳文件存放的目錄 。
queueID ： 文件隊(duì)列的ID，該ID與存放文件隊(duì)列的div的ID一致。
queueSizeLimit ： 當(dāng)允許多文件生成時(shí)，設(shè)置選擇文件的個(gè)數(shù)，默認(rèn)值：999 。
multi ： 設(shè)置為true時(shí)可以上傳多個(gè)文件。
auto ： 設(shè)置為true當(dāng)選擇文件后就直接上傳了，為false需要點(diǎn)擊上傳按鈕才上傳 。
fileDesc ： 這個(gè)屬性值必須設(shè)置fileExt屬性后才有效，用來(lái)設(shè)置選擇文件對(duì)話框中的提示文本，如設(shè)置fileDesc為“請(qǐng)選擇rar doc pdf文件”，打開(kāi)文件選擇框效果如下圖：
fileExt ： 設(shè)置可以選擇的文件的類型，格式如：'*.doc;*.pdf;*.rar' 。
sizeLimit ： 上傳文件的大小限制 。
simUploadLimit ： 允許同時(shí)上傳的個(gè)數(shù) 默認(rèn)值：1 。
buttonText ： 瀏覽按鈕的文本，默認(rèn)值：BROWSE 。
buttonImg ： 瀏覽按鈕的圖片的路徑 。
hideButton ： 設(shè)置為true則隱藏瀏覽按鈕的圖片 。
rollover ： 值為true和false，設(shè)置為true時(shí)當(dāng)鼠標(biāo)移到瀏覽按鈕上時(shí)有反轉(zhuǎn)效果。
width ： 設(shè)置瀏覽按鈕的寬度 ，默認(rèn)值：110。
height ： 設(shè)置瀏覽按鈕的高度 ，默認(rèn)值：30。
wmode ： 設(shè)置該項(xiàng)為transparent 可以使瀏覽按鈕的flash背景文件透明，并且flash文件會(huì)被置為頁(yè)面的最高層。 默認(rèn)值：opaque 。
cancelImg ：選擇文件到文件隊(duì)列中后的每一個(gè)文件上的關(guān)閉按鈕圖標(biāo)，如下圖：
上面介紹的key值的value都為字符串或是布爾類型，比較簡(jiǎn)單，接下來(lái)要介紹的key值的value為一個(gè)函數(shù)，可以在選擇文件、出錯(cuò)或其他一些操作的時(shí)候返回一些信息給用戶。
onInit : 做一些初始化的工作。
onSelect ：選擇文件時(shí)觸發(fā)，該函數(shù)有三個(gè)參數(shù)
event:事件對(duì)象。
queueID：文件的唯一標(biāo)識(shí)，由6為隨機(jī)字符組成。
fileObj：選擇的文件對(duì)象，有name、size、creationDate、modificationDate、type 5個(gè)屬性。
代碼如下：
$(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("唯一標(biāo)識(shí):" + queueId + "\r\n" +
"文件名：" + fileObj.name + "\r\n" +
"文件大小：" + fileObj.size + "\r\n" +
"創(chuàng)建時(shí)間：" + fileObj.creationDate + "\r\n" +
"最后修改時(shí)間：" + fileObj.modificationDate + "\r\n" +
"文件類型：" + fileObj.type
);
}
});
});
當(dāng)選擇一個(gè)文件后彈出的消息如下圖：
onSelectOnce ：在單文件或多文件上傳時(shí)，選擇文件時(shí)觸發(fā)。該函數(shù)有兩個(gè)參數(shù)event，data，data對(duì)象有以下幾個(gè)屬性：
fileCount：選擇文件的總數(shù)。
filesSelected：同時(shí)選擇文件的個(gè)數(shù)，如果一次選擇了3個(gè)文件該屬性值為3。
filesReplaced：如果文件隊(duì)列中已經(jīng)存在A和B兩個(gè)文件，再次選擇文件時(shí)又選擇了A和B，該屬性值為2。
allBytesTotal：所有選擇的文件的總大小。
onCancel : 當(dāng)點(diǎn)擊文件隊(duì)列中文件的關(guān)閉按鈕或點(diǎn)擊取消上傳時(shí)觸發(fā)。該函數(shù)有event、queueId、fileObj、data四個(gè)參數(shù)，前三個(gè)參數(shù)同onSelect 中的三個(gè)參數(shù)，data對(duì)象有兩個(gè)屬性fileCount和allBytesTotal。
fileCount：取消一個(gè)文件后，文件隊(duì)列中剩余文件的個(gè)數(shù)。
allBytesTotal：取消一個(gè)文件后，文件隊(duì)列中剩余文件的大小。
onClearQueue ：當(dāng)調(diào)用函數(shù)fileUploadClearQueue時(shí)觸發(fā)。有event和data兩個(gè)參數(shù)，同onCancel 中的兩個(gè)對(duì)應(yīng)參數(shù)。
onQueueFull ：當(dāng)設(shè)置了queueSizeLimit并且選擇的文件個(gè)數(shù)超出了queueSizeLimit的值時(shí)觸發(fā)。該函數(shù)有兩個(gè)參數(shù)event和queueSizeLimit。
onError ：當(dāng)上傳過(guò)程中發(fā)生錯(cuò)誤時(shí)觸發(fā)。該函數(shù)有event、queueId、fileObj、errorObj四個(gè)參數(shù)，其中前三個(gè)參數(shù)同上，errorObj對(duì)象有type和info兩個(gè)屬性。
type：錯(cuò)誤的類型，有三種‘HTTP', ‘IO', or ‘Security'
info：錯(cuò)誤的描述
onOpen ：點(diǎn)擊上傳時(shí)觸發(fā)，如果auto設(shè)置為true則是選擇文件時(shí)觸發(fā)，如果有多個(gè)文件上傳則遍歷整個(gè)文件隊(duì)列。該函數(shù)有event、queueId、fileObj三個(gè)參數(shù)，參數(shù)的解釋同上。
onProgress ：點(diǎn)擊上傳時(shí)觸發(fā)，如果auto設(shè)置為true則是選擇文件時(shí)觸發(fā)，如果有多個(gè)文件上傳則遍歷整個(gè)文件隊(duì)列，在onOpen之后觸發(fā)。該函數(shù)有event、queueId、fileObj、data四個(gè)參數(shù)，前三個(gè)參數(shù)的解釋同上。data對(duì)象有四個(gè)屬性percentage、bytesLoaded、allBytesLoaded、speed：
percentage：當(dāng)前完成的百分比
bytesLoaded：當(dāng)前上傳的大小
allBytesLoaded：文件隊(duì)列中已經(jīng)上傳完的大小
speed：上傳速率 kb/s
onComplete：文件上傳完成后觸發(fā)。該函數(shù)有四個(gè)參數(shù)event、queueId、fileObj、response、data五個(gè)參數(shù)，前三個(gè)參數(shù)同上。response為后臺(tái)處理程序返回的值，在上面的例子中為1或0，data有兩個(gè)屬性fileCount和speed
fileCount：剩余沒(méi)有上傳完成的文件的個(gè)數(shù)。
speed：文件上傳的平均速率 kb/s
注：fileObj對(duì)象和上面講到的有些不太一樣，onComplete 的fileObj對(duì)象有個(gè)filePath屬性可以取出上傳文件的路徑。
onAllComplete：文件隊(duì)列中所有的文件上傳完成后觸發(fā)。該函數(shù)有event和data兩個(gè)參數(shù)，data有四個(gè)屬性，分別為：
filesUploaded :上傳的所有文件個(gè)數(shù)。
errors ：出現(xiàn)錯(cuò)誤的個(gè)數(shù)。
allBytesLoaded ：所有上傳文件的總大小。
speed ：平均上傳速率 kb/s
相關(guān)函數(shù)介紹
在上面的例子中已經(jīng)用了uploadifyUpload和uploadifyClearQueue兩個(gè)函數(shù)，除此之外還有幾個(gè)函數(shù)：
uploadifySettings：可以動(dòng)態(tài)修改上面介紹的那些key值，如下面代碼
$('#uploadify').uploadifySettings('folder','JS');
如果上傳按鈕的事件寫(xiě)成下面這樣，文件將會(huì)上傳到uploadifySettings定義的目錄中
<a href="javascript:$('#uploadify').uploadifySettings('folder','JS');
$('#uploadify').uploadifyUpload()">上傳</a>
uploadifyCancel：該函數(shù)接受一個(gè)queueID作為參數(shù)，可以取消文件隊(duì)列中指定queueID的文件。
$('#uploadify').uploadifyCancel(id);
花了一個(gè)晚上，終于寫(xiě)完了，對(duì)JQuery這個(gè)上傳插件也基本了解了，希望對(duì)大家有所幫助，不對(duì)之處還望大家指正。
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
- swfupload使用代碼說(shuō)明
- swfupload 多文件上傳實(shí)現(xiàn)代碼
- asp.net javascript 文件無(wú)刷新上傳實(shí)例代碼
- asp.net 自定義控件實(shí)現(xiàn)無(wú)刷新上傳圖片,立即顯示縮略圖,保存圖片縮略圖
- asp.net UpdatePanel實(shí)現(xiàn)無(wú)刷新上傳圖片
- asp.net+js 實(shí)現(xiàn)無(wú)刷新上傳解析csv文件的代碼
- asp.net(c#)開(kāi)發(fā)中的文件上傳組件uploadify的使用方法（帶進(jìn)度條）
- SwfUpload在IE10上不出現(xiàn)上傳按鈕的解決方法
- asp.net使用jQuery Uploadify上傳附件示例
- asp.net中MVC借助Iframe實(shí)現(xiàn)無(wú)刷新上傳文件實(shí)例
- asp.net實(shí)現(xiàn)文件無(wú)刷新上傳方法匯總
相關(guān)文章
這篇文章主要介紹了jQuery中:text選擇器用法,以實(shí)例形式較為詳細(xì)的分析了text選擇器的功能、定義及匹配單行文本框的使用技巧,需要的朋友可以參考下2015-01-01
基于jQuery實(shí)現(xiàn)的無(wú)刷新表格分頁(yè)實(shí)例
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的無(wú)刷新表格分頁(yè)方法,結(jié)合完整實(shí)例形式較為詳細(xì)的分析了jQuery實(shí)現(xiàn)無(wú)刷新表格分頁(yè)的具體步驟與相關(guān)實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了基于jQuery下拉選擇框插件支持單選多選功能代碼的相關(guān)資料,需要的朋友可以參考下2016-06-06
jquery實(shí)現(xiàn)點(diǎn)擊展開(kāi)列表同時(shí)隱藏其他列表
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊展開(kāi)列表同時(shí)隱藏其他列表的方法,涉及jquery鼠標(biāo)事件及節(jié)點(diǎn)的遍歷與屬性操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
jQuery學(xué)習(xí)之prop和attr的區(qū)別示例介紹
prop和attr的區(qū)別你知道嗎？在本文有些不錯(cuò)的示例對(duì)兩者詳細(xì)介紹，感興趣的朋友不要錯(cuò)過(guò)2013-11-11
jQuery實(shí)現(xiàn)滾動(dòng)切換的tab選項(xiàng)卡效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)滾動(dòng)切換的tab選項(xiàng)卡效果代碼,涉及jquery鏈?zhǔn)讲僮骷皹邮絼?dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了詳解ECharts使用心得總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
JQuery實(shí)現(xiàn)相鄰item焦點(diǎn)移動(dòng)的示例詳解