Asp. NET multi-file upload Control Uploadify using method _ Practical skills

For uploadify file upload has been said before (file upload ~uploadify upload control), but did not involve the upload of multiple files, this time mainly to say a number of file upload, first of all, we have to clear a concept, Multi-File Upload front-end uploadify is through the rotation way to call our backstage upload program, so, for many documents on the word, also nothing strange.

Below is the file upload thumbnail below

The Assembly of the list uses the JS template, which can reduce the appearance of spelling errors for complex HTML structures by removing the Li element from the UI element, then by checking the Li element from the UI, then assembling it, and sending it to the code below.

An HTML template

<script type= "text/html" id= "litemp" >
 <li>
  <!--post-upload status--> <div class=
  "Vediochange" >
  <dl>
   <dt>
   <a href= "javascript:;" >
    <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"
   { SourceName} "/><br/> <input type=" hidden "name=" hdfilesize "value="
   {FileSize} "/><br
   </dt>
   <dd><a href= "javascript:;" class= "Lookbig" > Preview </a> <a href= "javascript: ; "class=" Reselect "onclick=" del (This) "> Close </a></dd>
  </dl>
  </div>
  <! --post-upload status-->
 </li>
 </script>

Two uploadfiy code

<script type= "Text/javascript" > $ (document). Ready (function () {$ ("#uploadify"). Uploadify ({' Uploader ': ' JS/JQ uery.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 ': functi On (event, Queueid, Fileobj, response, data) {//When a single file is uploaded and triggered//event: Event object//id: The only representation of the file in the file queue/ /fileobj: Select the object of the file, he contains the list of attributes//[name]-the name of the uploaded file//[filepath]-the university that uploaded the file on the server path//[size]– file, unit for byte//[creationd The ate]– file's creation date//[modificationdate]– the file's last modified date//[type]– the file's extension to '. ' Start//response: Server-side returned response text, here I return the processed file name//data: File queue details and file upload General data $ ("#preview"). Append (DataTemplate ("#
  Litemp "). Text (), {src:response, alt:fileObj.name}); }, ' OnError ': function (event, Queueid, fileobj) {//When a single file is out of error triggering alert ("File: + fileobj.name +" Upload failed!)
  ");
 },
  });
 }); Function del (O) {$ (O). Closest ("Li"). Remove (); } </script>

Three HTML code

<DIV class= "RT" >
 <ul class= "Clearfix w_vediochange" id= "Preview" >
 </ul>
</div>

<div id= "Filequeue" ></div>

Four ASHX code

 <summary>///Summary description for Uploadhandler///</summary> public class Uploadhandler:ihttp Handler {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 {false;

 }
 }
 }

For everyone to recommend a special topic for everyone to learn:"ASP." NET file Upload Summary "

This example is simply a description of the file upload function, if used in real projects, you need to further the design of the code.