ASP.NET多檔案上傳控制項Uploadify的使用方法_實用技巧

對於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>   <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檔案上傳匯總》

本執行個體只是簡單的說明了檔案上傳的功能,如果在真實項目中使用的話,還需要進一步的進行代碼的設計.