對于Uploadify文件上傳之前已經講過一次(文件上傳~Uploadify上傳控件),只不過沒有涉及到多文件的上傳,這回主要說一下多個文件的上傳,首先,我們要清楚一個概念,多文件上傳前端Uploadify是通過輪訓的方式去調用我們的后臺upload程序的,所以,對于多文件上傳來說,也沒什么稀奇的.
下面是文件上傳后的縮略圖如下
列表的組裝使用JS模板,這樣對于復雜的HTML結構來說,可以減少拼寫錯誤的出現,關閉是將LI元素從UI元素移除,最后提交時,從UI里檢查LI元素,然后對它進行組裝,并進行發送下面是相關代碼
一 HTML模版
script type="text/html" id="liTemp">
li>
!--上傳后狀態-->
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">預覽/a> nbsp;nbsp;a href="javascript:;" class="reselect" onclick="del(this)">關閉/a>/dd>
/dl>
/div>
!--上傳后狀態-->
/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) {//當單個文件上傳完成后觸發
//event:事件對象(the event object)
//ID:該文件在文件隊列中的唯一表示
//fileObj:選中文件的對象，他包含的屬性列表
//[name] - 已上傳文件的名稱
//[filePath] - 已上傳文件在服務器上的路徑
//[size] – 文件的大學，單位為字節
//[creationDate] – 文件的創建日期
//[modificationDate] – 文件的最后修改日期
//[type] – 文件的擴展名，以‘.'開始
//response:服務器端返回的Response文本，我這里返回的是處理過的文件名稱
//data：文件隊列詳細信息和文件上傳的一般數據
$("#preview").append(dataTemplate($("#liTemp").text(), { src: response, alt: fileObj.name }));
},
'onError': function (event, queueID, fileObj) {//當單個文件上傳出錯時觸發
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;
}
}
}
為大家推薦一個專題，供大家學習：《ASP.NET文件上傳匯總》
本實例只是簡單的說明了文件上傳的功能,如果在真實項目中使用的話,還需要進一步的進行代碼的設計.
您可能感興趣的文章:- ASP.NET插件uploadify批量上傳文件完整使用教程
- ASP.NET文件上傳控件Uploadify的使用方法
- asp.net(c#)開發中的文件上傳組件uploadify的使用方法（帶進度條）
- JQuery.uploadify 上傳文件插件的使用詳解 for ASP.NET
- asp.net uploadify實現多附件上傳功能
- asp.net使用jQuery Uploadify上傳附件示例
- ASP.NET MVC4 利用uploadify.js多文件上傳
