對(duì)于Uploadify文件上傳之前已經(jīng)講過(guò)一次(文件上傳~Uploadify上傳控件),只不過(guò)沒(méi)有涉及到多文件的上傳,這回主要說(shuō)一下多個(gè)文件的上傳,首先,我們要清楚一個(gè)概念,多文件上傳前端Uploadify是通過(guò)輪訓(xùn)的方式去調(diào)用我們的后臺(tái)upload程序的,所以,對(duì)于多文件上傳來(lái)說(shuō),也沒(méi)什么稀奇的.
下面是文件上傳后的縮略圖如下
列表的組裝使用JS模板,這樣對(duì)于復(fù)雜的HTML結(jié)構(gòu)來(lái)說(shuō),可以減少拼寫(xiě)錯(cuò)誤的出現(xiàn),關(guān)閉是將LI元素從UI元素移除,最后提交時(shí),從UI里檢查L(zhǎng)I元素,然后對(duì)它進(jìn)行組裝,并進(jìn)行發(fā)送下面是相關(guān)代碼
一 HTML模版
script type="text/html" id="liTemp">
li>
!--上傳后狀態(tài)-->
div class="VedioChange">
dl>
dt>
a href="javascript:;">
img width="140" height='92' src="{src}" alt="{alt}" />span class="playIcon">/span>/a>
input type="hidden" name="HdFileURL" value="{FilePath}" />br />
input type="hidden" name="HdImagePath" value="{ImagePath}" />br />
input type="hidden" name="HdSourceName" value="{SourceName}" />br />
input type="hidden" name="HdFileSize" value="{FileSize}" />br />
/dt>
dd>a href="javascript:;" class="lookBig">預(yù)覽/a> nbsp;nbsp;a href="javascript:;" class="reselect" onclick="del(this)">關(guān)閉/a>/dd>
/dl>
/div>
!--上傳后狀態(tài)-->
/li>
/script>
二 uploadfiy代碼
script type="text/javascript">
$(document).ready(function () {
$("#uploadify").uploadify({
'uploader': 'js/jquery.uploadify-v2.1.4/uploadify.swf',
'script': 'UploadHandler.ashx',
'cancelImg': 'js/jquery.uploadify-v2.1.4/cancel.png',
'folder': '/UploadFile/',
'queueID': 'fileQueue',
'auto': true,
'multi': true,
'onComplete': function (event, queueID, fileObj, response, data) {//當(dāng)單個(gè)文件上傳完成后觸發(fā)
//event:事件對(duì)象(the event object)
//ID:該文件在文件隊(duì)列中的唯一表示
//fileObj:選中文件的對(duì)象，他包含的屬性列表
//[name] - 已上傳文件的名稱(chēng)
//[filePath] - 已上傳文件在服務(wù)器上的路徑
//[size] – 文件的大學(xué)，單位為字節(jié)
//[creationDate] – 文件的創(chuàng)建日期
//[modificationDate] – 文件的最后修改日期
//[type] – 文件的擴(kuò)展名，以‘.'開(kāi)始
//response:服務(wù)器端返回的Response文本，我這里返回的是處理過(guò)的文件名稱(chēng)
//data：文件隊(duì)列詳細(xì)信息和文件上傳的一般數(shù)據(jù)
$("#preview").append(dataTemplate($("#liTemp").text(), { src: response, alt: fileObj.name }));
},
'onError': function (event, queueID, fileObj) {//當(dāng)單個(gè)文件上傳出錯(cuò)時(shí)觸發(fā)
alert("文件:" + fileObj.name + " 上傳失??！");
},
});
});
function del(o) {
$(o).closest("li").remove();
}
/script>
三 html代碼
div class="rt">
ul class="clearfix w_VedioChange" id="preview">
/ul>
/div>
div id="fileQueue">/div>
四 ashx代碼
/// summary>
/// Summary description for UploadHandler
/// /summary>
public class UploadHandler : IHttpHandler
{
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(Path.Combine(uploadPath, file.FileName));
var pathArr = uploadPath.Split('\\');
context.Response.Write(HttpContext.Current.Request.Url.Scheme
+ "://"
+ HttpContext.Current.Request.Url.Authority
+ "/"
+ pathArr[pathArr.Length - 2]
+ "/"
+ pathArr[pathArr.Length - 1]
+ "/"
+ file.FileName);
}
else
{
context.Response.Write("0");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
為大家推薦一個(gè)專(zhuān)題，供大家學(xué)習(xí)：《ASP.NET文件上傳匯總》
本實(shí)例只是簡(jiǎn)單的說(shuō)明了文件上傳的功能,如果在真實(shí)項(xiàng)目中使用的話(huà),還需要進(jìn)一步的進(jìn)行代碼的設(shè)計(jì).
您可能感興趣的文章:- ASP.NET插件uploadify批量上傳文件完整使用教程
- ASP.NET文件上傳控件Uploadify的使用方法
- asp.net(c#)開(kāi)發(fā)中的文件上傳組件uploadify的使用方法（帶進(jìn)度條）
- JQuery.uploadify 上傳文件插件的使用詳解 for ASP.NET
- asp.net uploadify實(shí)現(xiàn)多附件上傳功能
- asp.net使用jQuery Uploadify上傳附件示例
- ASP.NET MVC4 利用uploadify.js多文件上傳
