您现在的位置是：网站首页> 编程资料编程资料

asp.net单文件带进度条上传的解决方案_实用技巧_

2023-05-24 578人已围观

简介 asp.net单文件带进度条上传的解决方案_实用技巧_

最近做项目中遇到很多问题，比如带进度条的文件上传，看了网上很多资料还没找到真正意义上的ASP.NET实现进度条上传（可能是我没找到），下面我来跟大家分享一下我实现的这个程序。
首先看下界面效果，当然你可以完全修改界面为你自己所用。

先解释一下这个程序，该程序采用了jquery框架，实现了小文件上传，不超过80Mb，可以在web.config文件中进行相应的配置，但是有个最大值，具体需要查看msdn。开发环境采用visual studio 2013 .net framework 4.5，运行的时候大家注意一下是否满足要求，好了，下面直入正题。
先来看看实现原理。基本原理：一个页面进行文件上传，另外一个页面去监听这个文件上传了多少。
这里面有两个地方需要解释一下：第一个，如何知道监听的这个文件就是上传的这个文件？实现机制很简单，就是让asp.net产生一个唯一的guid，这个id序号是唯一的，通过ajax取出来赋值给一个隐藏字段；第二个，如何获取guid标志的文件信息？通过asp.net缓存机制实现，上传的过程中，不断的将上传信息往缓存里面写，直到文件上传完成，而在另外一个通过guid获取缓存的信息，信息包括你想要的信息，比如上传了多少字节、消耗了多长时间等。好了，要点就解释到这里，有疑问的话给我留言。
下面来说说具体的实现：
文件目录结构如下：

index.htm就是文件上传页面，提交form给UploadHandler目录下的Default.aspx，以实现文件上传。
ProgressHandler目录下三个文件为Abort.ashx、GenericGuid.ashx,Handler.ashx功能分别为：根据Guid取消正在上传的文件，生成Guid，根据Guid获取上传信息。
第一步：建立index.htm页面，这个上传页面，需要注意的就是需要一个隐藏的iframe，并且名字为form提交的目标。

ASP.NET Ajax文件上传进度条示例ASP.NET Ajax 文件上传进度条示例
*本程序适合小文件上传，不超过80Mb
文件地址

文件描述


文件上传
正在准备上传...
取消确定

第二步，创建GenerateGuid.ashx文件，作用就是生成唯一的Guid。

<%@ WebHandler Language="C#" Class="ProgressHandler.Handler" %> using System; using System.Web; using System.Xml.Linq; namespace ProgressHandler { public class Handler : IHttpHandler { ///  /// 获得上传文件的GUID /// 
 /// 当前请求实体 /// 2015-06-28 /// FreshMan 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,0,Buffersize); while (len > 0&&!abort) { _fStream.Write(buffer,0,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,0,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 { ///  /// 获得上传文件的进度 /// 
 /// 当前请求实体 /// 2015-06-28 /// FreshMan 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 { ///  /// 取消上传处理程序 /// 
 /// 当前请求实体 /// 2015-06-28 /// FreshMan 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框架。
核心代码是ajax-progress-upload.js文件，另外还有一个获取guid的文件。

 $(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({ u
                提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                
                
                                            上一篇：asp.net上传文件到数据库的解决方案_实用技巧_
                                                                下一篇：asp.net文件上传带进度条实现案例（多种风格）_实用技巧_

您现在的位置是：网站首页> 编程资料编程资料

asp.net单文件带进度条上传的解决方案_实用技巧_

相关内容

点击排行

本栏推荐

猜你喜欢