asp.net单文件带进度条上传的解决方案
最近做项目中遇到很多问题,比如带进度条的文件上传,看了网上很多资料还没找到真正意义上的ASP.NET实现进度条上传(可能是我没找到),下面我来跟大家分享一下我实现的这个程序。 先解释一下这个程序,该程序采用了jquery框架,实现了小文件上传,不超过80Mb,可以在web.config文件中进行相应的配置,但是有个最大值,具体需要查看msdn。开发环境采用visual studio 2013 .net framework 4.5,运行的时候大家注意一下是否满足要求,好了,下面直入正题。
index.htm就是文件上传页面,提交form给UploadHandler目录下的Default.aspx,以实现文件上传。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ASP.NET Ajax文件上传进度条示例</title> <meta name="author" content="李检全" /> <link href="Styles/base.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script> <script src="Scripts/ljq.lib.js" type="text/javascript"></script> <script src="Scripts/Ajax/GuidGet.js" type="text/javascript"></script> <script src="Scripts/Ajax/ajax-progress-upload.js" type="text/javascript"></script> </head> <body> <div id="upload_demo"> <div class="title">ASP.NET Ajax 文件上传进度条示例</div> <form action="UploadHandler/Default.aspx" enctype="multipart/form-data" method="post" target="upload_hidden_iframe"> <input id="guid" name="guid" value="" type="hidden" /> <p>*本程序适合小文件上传,不超过80Mb</p> <p>文件地址</p> <input name="upload_file" type="file" /> <br /> <p>文件描述</p> <textarea name="description_file"></textarea> <br /> <br /> <input type="submit" value="上传文件" /> </form> </div> <div id="back_panel"></div> <div id="upload_panel"> <div id="upload_title">文件上传</div> <div id="upload_content"> <ul> <li id="finished_percent">正在准备上传...</li> <li><div id="upload_bar"><div id="upload_progress"></div></div></li> <li id="upload_speed"></li> <li id="upload_costTime"></li> <li id="upload_fileSize"></li> <li id="upload_fileName"></li> </ul> <div id="upload_detail"></div> <div id="upload_choose"> <span id="upload_cancel">取消</span><span id="upload_submit">确定</span> </div> </div> </div> <iframe name="upload_hidden_iframe" style="display:none;"></iframe> </body> </html> 第二步,创建GenerateGuid.ashx文件,作用就是生成唯一的Guid。 <%@ WebHandler Language="C#" Class="ProgressHandler.Handler" %> using System; using System.Web; using System.Xml.Linq; namespace ProgressHandler { public class Handler : IHttpHandler { /// <summary> /// 获得上传文件的GUID /// </summary> /// <param name="context">当前请求实体</param> /// <creattime>2015-06-28</creattime> /// <author>FreshMan</author> public void ProcessRequest(HttpContext context) { context.Response.Charset = "utf-8"; context.Response.ContentType = "application/xml"; var guid = Guid.NewGuid().ToString(); var doc = new XDocument(); var root = new XElement("root"); var xGuid = new XElement("guid",guid); root.Add(xGuid); doc.Add(root); context.Response.Write(doc.ToString()); context.Response.End(); } public bool IsReusable { get { return false; } } } } 第三步,创建Default.aspx文件,用于提交表单时上传文件。 using System; namespace UploadHandler { public partial class UploadHandlerDefault : System.Web.UI.Page { protected void Page_Load(object sender,EventArgs e) { string guid = Request.Params["guid"]; UploadUtil utilHelp = new UploadUtil(this,guid); utilHelp.Upload(); } } } 上传核心代码: using System; using System.Web; using System.IO; using System.Configuration; using System.Web.UI; using System.Web.Caching; using System.Threading; public class UploadUtil { private Stream _reader; private FileStream _fStream; private const int Buffersize = 10000; private readonly string _filePath =new Page().Server.MapPath(ConfigurationManager.AppSettings["upload_folder"]); private readonly Page _page; private readonly string _guid; public UploadUtil(Page page,string guid) { _page = page; _guid = guid; } public void Upload() { if (_page.Request.Files.Count > 0) { DoUpload(_page.Request.Files[0]); } } private void DoUpload(HttpPostedFile postedFile) { bool abort = false; string uploadFilePath = _filePath + DateTime.Now.ToFileTime()+"//"; if (!Directory.Exists(uploadFilePath)) { Directory.CreateDirectory(uploadFilePath); } string uploadFileName = postedFile.FileName; DownloadingFileInfo info = new DownloadingFileInfo(uploadFileName,postedFile.ContentLength,postedFile.ContentType); object fileObj = HttpContext.Current.Cache[_guid]; if (fileObj != null) { HttpContext.Current.Cache.Remove(_guid); } HttpContext.Current.Cache.Add(_guid,info,null,DateTime.Now.AddDays(1),TimeSpan.Zero,CacheItemPriority.AboveNormal,null); DateTime begin=DateTime.Now.ToLocalTime(); _fStream = new FileStream(uploadFilePath + uploadFileName,FileMode.Create); _reader = postedFile.InputStream; byte []buffer=new byte[Buffersize]; int len = _reader.Read(buffer,Buffersize); while (len > 0&&!abort) { _fStream.Write(buffer,len); DateTime end = DateTime.Now.ToLocalTime(); info.CostTime = (long)(end - begin).TotalMilliseconds; info.FileFinished += len; //模拟延时用,实际应用的时候注销他 Thread.Sleep(1000); HttpContext.Current.Cache[_guid] = info; abort=((DownloadingFileInfo)HttpContext.Current.Cache[_guid]).Abort; len = _reader.Read(buffer,Buffersize); } _reader.Close(); _fStream.Close(); if (abort) { if (File.Exists(uploadFilePath + uploadFileName)) { File.Delete(uploadFilePath + uploadFileName); } } } }
第四步,创建Handler.ashx文件,用于查看文件上传情况。 <%@ WebHandler Language="C#" Class="ProgressHandler.Handler" %> using System.Web; using System.Xml.Linq; namespace ProgressHandler { public class Handler : IHttpHandler { /// <summary> /// 获得上传文件的进度 /// </summary> /// <param name="context">当前请求实体</param> /// <creattime>2015-06-28</creattime> /// <author>FreshMan</author> public void ProcessRequest(HttpContext context) { context.Response.ContentType = "application/xml"; context.Response.Charset = "utf-8"; var guid = context.Request.Form["guid"]; var info = context.Cache[guid] as DownloadingFileInfo; var doc = new XDocument(); var root = new XElement("root"); if (info != null) { var fileName = new XElement("fileName",info.FileName); var fileFinished = new XElement("fileFinished",info.FileFinished); var fileSize = new XElement("fileSize",info.FileSize); var costTime = new XElement("costTime",info.CostTime); var fileState = new XElement("fileState",info.FileState); var speed = new XElement("speed",info.Speed); var percent = new XElement("percent",info.Percent); var abort = new XElement("abort",false); root.Add(fileName); root.Add(fileFinished); root.Add(fileSize); root.Add(costTime); root.Add(fileState); root.Add(speed); root.Add(percent); if (info.Abort) { abort.Value = info.Abort.ToString(); context.Cache.Remove(guid); } if (info.FileState == "finished") { context.Cache.Remove(guid); } } else { var none = new XElement("none","no file"); root.Add(none); } doc.Add(root); context.Response.Write(doc.ToString()); context.Response.End(); } public bool IsReusable { get { return false; } } } } 第五步,创建Abort.ashx文件,用于取消上传。 <%@ WebHandler Language="C#" Class="ProgressHandler.Abort" %> using System.Web; using System.Xml.Linq; namespace ProgressHandler { public class Abort : IHttpHandler { /// <summary> /// 取消上传处理程序 /// </summary> /// <param name="context">当前请求实体</param> /// <creattime>2015-06-28</creattime> /// <author>FreshMan</author> public void ProcessRequest(HttpContext context) { context.Response.ContentType = "application/xml"; context.Response.Charset = "utf-8"; var guid = context.Request.Form["guid"]; var abort = !string.IsNullOrEmpty(context.Request.Form["abort"]); var info = context.Cache[guid] as DownloadingFileInfo; if (info != null) { info.Abort = abort; context.Cache[guid] = info; } var doc = new XDocument(); var root = new XElement("root"); var flag = new XElement("flag",info == null ? "false" : "true"); root.Add(flag); doc.Add(root); context.Response.Write(doc.ToString()); context.Response.End(); } public bool IsReusable { get { return false; } } } } 好了,下面就是编写javascript脚本了,我引用了jquery这个框架,另外还用了ui框架。 $(document).ready(function () { var _guid_url = "ProgressHandler/GenerateGuid.ashx"; var _progress_url = "ProgressHandler/Handler.ashx"; var _abort_url = "ProgressHandler/Abort.ashx"; var _target = "#guid"; var _guid = ""; var _cancel = false; var _timer; LJQ.setGuid(_target,_guid_url); $("#upload_panel").draggable({ handle: "#upload_title" }); $("#upload_choose span").hover(function () { $(this).css({ "color": "#f6af3a","border": "1px solid #e78f08" }); },function () { $(this).css({ "color": "#1c94cd","border": "1px solid #ddd" }); }); $("#upload_cancel").click(function () { $.ajax({ url: _abort_url,data: { guid: _guid,abort: true },dataType: "xml",type: "post",success: function () { $("#upload_panel").fadeOut('fast'); $("#back_panel").fadeOut(1000); window.clearInterval(_timer); } }); }); $("#upload_submit").click(function () { $("#upload_panel").fadeOut('fast'); $("#back_panel").fadeOut("1000"); }); $("form").submit(function () { _guid = $(_target).val(); if ($("input[name='upload_file']").val() == "") { alert("未指定上传文件!"); return false; } $("#upload_progress").css("width","0%"); $("#finished_percent").html("准备上传..."); $("#upload_speed").html(""); $("#upload_fileName").html(""); $("#upload_fileSize").html(""); $("#upload_costTime").html(""); var _option = { url: _progress_url,data: { guid: _guid },beforeSend: function () { $("#back_panel").fadeTo('fast','0.5'); $("#upload_panel").fadeIn('1000'); },success: function (response) { if ($(response).find("root abort").text() == "true") { $("#upload_panel").fadeOut('fast'); $("#back_panel").fadeOut(1000); window.clearInterval(_timer); } else if ($(response).find("root none").text() == "no file") { } else { var _percent = ($(response).find("root percent").text() * 100); var _speed = $(response).find("root speed").text(); var _fileSize = $(response).find("root fileSize").text(); var _upload_costTime = $(response).find("root costTime").text(); if (parseInt(_speed) < 1024) { _speed = LJQ.toFix(_speed) + "Kb"; } else { _speed = LJQ.toFix(_speed / 1024) + "Mb"; } if (parseInt(_fileSize) / 1024 < 1024) { _fileSize = LJQ.toFix(_fileSize / 1024) + "Kb"; } else if (parseInt(_fileSize) / 1024 / 1024 < 1024) { _fileSize = LJQ.toFix(_fileSize / 1024 / 1024) + "Mb"; } else { _fileSize = LJQ.toFix(_fileSize / 1024 / 1024 / 1024) + "Gb"; } if (_upload_costTime < 1000) { _upload_costTime = _upload_costTime + "毫秒"; } else if (_upload_costTime / 1000 < 60) { _upload_costTime = parseInt(_upload_costTime / 1000) + "秒" + _upload_costTime % 1000 + "毫秒"; } else { _upload_costTime = parseInt(_upload_costTime / 1000 / 60) + "分" + parseInt((_upload_costTime % 60000) / 1000) + "秒" + _upload_costTime % 1000 + "毫秒"; } $("#upload_progress").css("width",parseInt(_percent) + "%"); $("#finished_percent").html("完成百分比:" + LJQ.toFix(_percent) + "%"); $("#upload_speed").html("上传速度:" + _speed + "/sec"); $("#upload_fileName").html("文件名称:" + $(response).find("root fileName").text()); $("#upload_fileSize").html("文件大小:" + _fileSize); $("#upload_costTime").html("上传耗时:" + _upload_costTime); if (_percent >= 100) { window.clearInterval(_timer); $("#finished_percent").html("<span style='color:green;'>文件上传完成</span>"); } if (_cancel) { window.clearInterval(_timer); } } },error: function () { } }; _timer = window.setInterval(function () { $.ajax(_option); },1000); }); }); 以上为代码的主要部分。asp.net单文件带进度条上传,不属于任务控件,也不是flash类型的上传,完全是asp.net、js、css实现上传。源码为开发测试版,需要使用的亲需要注意修改配置文件。 项目源码下载请点击这里:http://xiazai.aspzz.cn/201509/yuanma/asp_net_progressbar(aspzz.cn).rar (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- asp.net-mvc – 没有App_Data,Asp.net mvc无法运行
- 手动把asp.net的类生成dll文件的方法
- 在asp.net gridview中如何访问RowDataBound事件中的BoundFi
- asp.net-mvc – FluentValidation可以做复选框吗?
- 十七点学完安全知识超级详细了解进程和病毒知识 转载
- asp.net-mvc-4 – 如何在服务器上安装ASP.NET MVC4 RC(2008
- Asp.net Webservice – 使用jquery AJAX安全地调用webservi
- asp.net-mvc – Asp.Net Mvc – 在ActionResult.Execute之前
- asp.net-mvc – ASP.NET MVC中的Authorize属性是否用于验证
- asp.net-mvc – ASP.NET MVC单元测试控制器与HttpContext
- asp.net-mvc – 如何在ASP.NET MVC中实现分页?
- asp.net – SCRIPT5022:Sys.WebForms.PageReque
- 在运行时设置ASP.NET母版页
- ASP.net防止SQL注入方法
- asp.net-mvc – MVC WebApi不使用AutofacWebApiD
- asp.net-mvc-4 – 无法从程序集’itextsharp,Ver
- 数组 – ASP MVC控制器动作可以接收一个byte []吗
- asp.net-mvc – Windows Azure上的ASP.NET MVC是
- asp.net – 关于年龄验证的Cookie法
- asp.net-core – 在ASP.NET Core中将html导出为p