ASP.NET + jQuery – Upload Progress Bar ( Uploadify )

 
ASP.NET + jQuery – Upload Progress Bar ( Uploadify )
 
係 Page 上建立 "Uploadify" 及 "Upload" Folder
將 Uploadify Package 內 ( "cancel.png" / "jquery.uploadify.v2.1.0.js" / "swfobject.js" / "upload.swf" / "uploadify.css" ) 抄去 "Uploadify" Folder 內
 

   WebForm2.aspx
 
   <link rel="Stylesheet" type="text/css" href="uploadify/uploadify.css" />
   <script src="http://code.jquery.com/jquery-latest.js"></script>
   <script type="text/javascript" src="uploadify/swfobject.js"></script>
   <script type="text/javascript" src="uploadify/jquery.uploadify.v2.1.0.js"></script>
 
   <script type = "text/javascript">
 
      var fileinfo = "";
 
      $(window).load(function () {
 
         $("#<%=FileUpload1.ClientID %>").uploadify({
 
            'uploader': 'uploadify/upload.swf',
            'buttonText': 'Browse Files',
            'script': 'Handler1.ashx',
            'folder': '/',
            'cancelImg': "uploadify/cancel.png",
            'queueID': 'fileQueue',
            'fileDesc': 'Image Files',
            'fileExt': '*.flv;*.jpg;*.jpeg;*.gif;*.png',
            'multi': false,
            'auto': true,
            'onOpen': function (event, queueId, fileObj, data) {
            },
            'onComplete': function (event, queueId, fileObj, response, data) {
 
               var filesize = "";
 
               if ((fileObj.size / 1024 / 1024) > 1) {
                  filesize = (Math.round((fileObj.size / 1024 / 1024) * 100) / 100) + "Mb";
               } else {
                  filesize = (Math.round((fileObj.size / 1024) * 100) / 100) + "kb";
               }
 
               fileinfo += fileObj.name + "    " + filesize + "<br />";
               $("#fileinfo").html(fileinfo);
               $("#uploadinfo").html($("#uploadinfo").html() + response);
 
            }
 
         });
 
      });
 
   </script>
 
   … …
 
   <form id="form1" runat="server">
   <div>
      <asp:FileUpload ID="FileUpload1" runat="server" style="width:500px;" ViewStateMode="Disabled" AutoPostBack="false" />
      <div id="fileQueue"></div>
      <div id="fileinfo"></div>
      <div id="uploadinfo"></div>
   </div>
   </form>
 

 

   Handler1.ashx.cs
 
   using System;
   using System.Web;
   using System.IO;
 
   namespace WebApplication1
   {
      public class Handler1 : IHttpHandler
      {
         public void ProcessRequest(HttpContext context)
         {
            context.Response.ContentType = "text/plain";
            context.Response.Expires = -1;
            try
            {
               HttpPostedFile postedFile = context.Request.Files["Filedata"];
 
               if (Directory.Exists(context.Server.MapPath("/upload/")))
               {
                  postedFile.SaveAs(context.Server.MapPath("/upload/") + postedFile.FileName.ToString().Trim());
               }
 
               context.Response.Write("./upload/" + postedFile.FileName.ToString().Trim() + "<br />");
               context.Response.StatusCode = 200;
            }
            catch (Exception ex)
            {
               context.Response.Write("Error: " + ex.Message);
            }
         }
 
         public bool IsReusable
         {
            get
            {
               return false;
            }
         }
      }
   }