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; } } } } |