最近在项目中遇到了很多问题，比如上传带有进度条的文件，在网上看了很多资料，还没有找到真正的ASP.NET上传进度条(可能是没找到)。我来和大家分享一下我实现的程序。先看界面效果，当然可以完全修改界面自己使用。

首先，解释一下这个程序。该程序采用jquery框架，实现上传小文件，不超过80Mb。它可以在web.config文件中配置，但是有一个最大值，所以需要专门检查msdn。开发环境采用Visual Studio 2013。NET框架4.5。跑步时，大家要注意是否符合要求。好了，让我们言归正传。我们先来看看实现原理。基本原理：一个页面上传文件，另一个页面监控上传了多少文件。有两个地方需要解释：第一，你怎么知道你听的文件就是你上传的文件？实现机制很简单，就是让ASP.NET生成一个唯一的guid，这个id序列号是唯一的，由ajax取出来分配给一个隐藏字段；二、如何获取guid标志的文件信息？通过ASP.NET缓存机制，在上传的过程中，上传的信息不断写入缓存，直到文件上传，而缓存的信息是通过另一个中的guid获取的，包括你想要的信息，比如上传多少字节，需要多长时间。好了，这就是重点。如果你有任何问题，请给我留言。下面来说说具体的实现：文件目录结构如下：

index.htm是文件上传页面，提交表单到UploadHandler目录中的Default.aspx上传文件。ProgressHandler目录中的三个文件是Abort.ashx和GenericGuid.ashx、Handler.ashx和Handler的函数。ashx有：根据Guid取消正在上传的文件，生成Guid，根据Guid获取上传信息。第一步：创建index.htm页面。对于这个上传页面，需要注意的是需要一个隐藏的iframe作为表单提交的目标。

！DOCTYPE HTML PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' HTML xmlns=' http://www .w3。org/1999/XHTML ' head titleASP.NET阿贾克斯文件上传进度条示例/title meta name=' author ' content='李检全/link href=' style/base。CSS ' rel='样式表type=' text/CSS '/script src=' http : scripts/jquery-1。4 .2 .量滴js ' type=' text/JavaScript '/script src=' http : scripts/jquery-ui-1。8 .2 .定制。量滴js ' type=' text/JavaScript '/script src=' http 3360 scripts/ljq。解放运动文件上传进度条示例/div表单操作=' UploadHandler/default。aspx ' enctype=' multipart/form-data '方法=' post ' target=' upload _ hidden _ iframe '输入id=' guid ' name=' guid ' value=' type=' hidden '/p *本程序适合小文件上传，不超过80Mb/p p文件地址/p输入名称='上传文件'类型='file'/br/p文件描述/p文本区域名称=' description _ file '/文本区域br/br/输入类型='submit '值='上传文件//form/div div id=' back _ panel '/div div id=' upload _ panel ' div id=' upload _ title '文件上传/div div id='上传_内容ul li id='完成_百分比'正在准备上传./Li Li id=' upload _ bar ' div id=' upload _ progress '/div/Li Li id=' upload _ speed '/Li Li id=' upload _ cost time '/Li Li id=' upload _ fileSize '/Li Li id=' upload _ fileName '/Li/ul div id=' upload _ detail '/div id=' upload _ choose ' span id=' upload _ cancel '取消/spanspan id='upload_submit '确定/span/div/div/div iframe name=' upload _ hidden _ iframe ' style=' display : none；'/iframe /body /html第二步，创建GenerateGuid.ashx文件，作用就是生成唯一的Guid。

%@ WebHandler语言='C#' Class='ProgressHandler .使用系统的处理程序"% 1";使用系统网络.使用系统Xml。Linq命名空间progress Handler { public class Handler : IHttpHandler {///summary///获得上传文件的GUID////summary///param name=' context '当前请求实体/param///creattime 2015-06-28/creattime///AuthorIng/author public void process request(HttpContext context){ context .回应。charset=' utf-8 '；语境。响应content type=' application/XML '；var guid=Guid .NewGuid().ToString()；var doc=new Xdocument()；var root=new xeElement(' root ')；var xGuid=new xeElement(' guid '，guid)；根. add(Xguid)；医生添加(根)；语境。回应。写（文档. ToString())；语境。响应。end()；} public bool IsReuse { get { return false；} } } } 第三步，创建Default.aspx文件，用于提交表单时上传文件。

使用系统；命名空间UploadHandler {公共分部类上传处理程序默认：系统.网络。用户界面。第{页受保护的无效页面_加载(对象发送者，事件参数e){ 0字符串guid=请求.参数[' guid ']；UploadUtil utilHelp=new UploadUtil(this，guid)；utilHelp .上传();} } } 上传核心代码：

使用系统；使用系统网络.使用系统IO；使用系统。配置；使用系统网络。用户界面使用系统网络。缓存；使用系统。穿线；公共类UploadUtil { private Stream _ reader；私有FileStream _ fsstream private const int Buffersize=10000；私有只读字符串_文件路径=新页面()。AppSettings[' upload _ folder '])；私有只读页面；私有只读字符串_ guidpublic UploadUtil(页面页面页面，字符串guid){ _ Page=Page；_ guid=guid } public void Upload(){ if(_ page).请求。文件。计数0){ DoUpload(_ page).请求文件[0]);} } private void DoUpload(Httpteddfilestedfile){ bool abort=false；字符串上传文件路径=_文件路径日期时间.现在。ToFileTime()'////'；if(！目录。存在（上传文件路径)){目录创建目录(uploadFilePath)；}字符串上传文件名=发布文件.文件名；下载文件信息=新下载文件信息（上传文件名，发布文件内容长度，邮政文件.内容类型)；对象fileObj=HttpContext .当前缓存[_ guid]；if (fileObj！=null) { HttpContext .当前缓存。删除(_ guid)；} HttpContext .当前缓存。添加(_guid，信息，空，日期时间。现在。添加天数(1),时间跨度。零，缓存项目优先级.高于正常值，为空)；日期时间开始=日期时间现在。ToLocalTime()；_ fStream=新文件流（上传文件路径上传文件名称，文件模式。创建);_reader=postedFile .输入流字节[]缓冲=新字节[Buffersize]；int len=_reader .读取（缓冲区，0,缓冲区大小);while (len 0！中止){ _fStream .写(缓冲区，0，len)；日期时间结束=日期时间现在。ToLocalTime()；信息。成本时间=(长)(结束-开始)。总数毫秒；信息filefined=len//模拟延时用，实际应用的时候注销他线程。睡眠(1000);HttpContext .当前。缓存[_guid]=信息；abort=((下载文件信息)HttpContext .当前缓存[_guid]).中止；len=_reader .读取（缓冲区，0,缓冲区大小);} _阅读器.close()；_fStream .close()；如果（中止){如果（文件。存在（上传文件路径上传文件名称)){文件。删除（上传文件路径上传文件名);} } } }

第四步，创建Handler.ashx文件，用于查看文件上传情况。

%@ WebHandler语言='C#' Class='ProgressHandler .处理程序"%使用系统"。网使用系统Xml。Linq命名空间progress Handler { public class Handler : IHttpHandler {///summary///获得上传文件的进度////summary///param name=' context '当前请求实体/param///creattime 2015-06-28/creattime///AuthorIng/author public void process request(HttpContext context){ context .响应content type=' application/XML '；语境回应。charset=' utf-8 '；var guid=上下文。请求。表单[' guid ']；var信息=上下文。将[guid]缓存为下载文件信息；var doc=new Xdocument()；var root=new xeElement(' root ')；如果(信息！=null){ var FIlename=new xeElement(' FIlename '，info .FileName)；var文件完成=新xeelement('文件完成'，信息。文件已完成);var fileSize=new xeelement(' fileSize '，信息。文件大小);var costTime=新的XElement('成本时间'，信息成本时间)；var fileState=new xeelement(' fileState '，信息。文件状态);变化速度=新的xeElement('速度'，信息。速度);var百分比=新的xeElement('百分比'，信息。百分比);var abort=new xeElement(' abort '，false)；根。添加(FIlename)；根。添加（文件已完成);根。添加（文件大小);根。添加（成本时间);根。添加（文件状态);根。添加（速度);根。添加（百分比);如果(信息。中止){中止。值=信息中止。ToString()；语境。缓存。删除(guid)；}如果(信息FileState=='finished') { context .缓存。删除(guid)；} } else { var none=new xeElement(' none '，' no file ')；根。添加（无);}医生添加(根)；语境。回应。写（文档. ToString())；语境。响应。end()；} public bool IsReuse { get { return false；} } } } 第五步，创建Abort.ashx文件，用于取消上传。

%@ WebHandler语言='C#' Class='ProgressHandler .使用系统中止"% 1"。网使用系统Xml。Linq命名空间progress handler { public class Abort : IHttpHandler {///summary///取消上传处理程序////summary///param name=' context '当前请求实体/param///creattime 2015-06-28/creattime///AuthorIng/author public void process request(HttpContext context){ context .响应content type=' application/XML '；语境回应。charset=' utf-8 '；var guid=上下文。请求。表单[' guid ']；var abort=！字符串IsNullOrEmpty(上下文。请求。表单['中止']);var信息=上下文。将[guid]缓存为下载文件信息；如果(信息！=null) {信息.中止=中止；语境。缓存[guid]=信息；} var doc=new XDocument()；var root=new xeElement(' root ')；var flag=new xeElement(' flag '，info==null？false ' : ' true ')；根。添加（标志);医生添加(根)；语境。回应。写（文档. ToString())；语境。响应。end()；} public bool IsReuse { get { return false；} } } } 好了，下面就是编写爪哇岛描述语言脚本了，我引用了jquery这个框架，另外还用了用户界面框架。核心代码是Ajax-进度-上传。射流研究…文件，另外还有一个获取全局唯一标识符的文件。

$(文档)。ready(function(){ var _ guid _ URL=' progress handler/generate guid。ashx '；var _ progress _ URL='进度处理程序/处理程序。ashx '；var _ abort _ URL=' progress handler/abort。ashx '；var _ target=' # guid var _ guid=var _ cancel=false var _ timerljq . setguid(_ target，_ guid _ URL)；$(“# upload _ panel”).可拖动({ handle : ' # upload _ title ' })；$('#upload_choose span ').悬停(function () { $(this)).css({ 'color': '#f6af3a '，' border ' : ' 1px solid # e78f 08 ' })；}，function () { $(this).css({ 'color': '#1c94cd '，' border ' : ' 1px solid # DDD ' })；});$(“# upload _ cancel”).单击(函数(){ $).ajax({ url: _abort_url，data: { guid: _guid，abort: true }，dataType: 'xml '，type: 'post '，success : function(){ $(' # upload _ panel ').淡出(“快速”)；$('#back_panel ').淡出(1000)；窗户。clear interval(_ timer)；} });});$(“# upload _ submit”).单击(函数(){ $('#upload_panel ')).淡出(“快速”)；$('#back_panel ').淡出(' 1000 ')；});$(“表单”).submit(function(){ _ guid=$(_ target).val()；if($(' input[name=' upload _ file ']').val()=='') { alert('未指定上传文件！');返回false } $(“# upload _ progress”).css('width '，' 0% ')；$(' #完成百分比')。html(")准备上传.');$(“# upload _ speed”).html(" ")；$('#upload_fileName ').html(" ")；$('#upload_fileSize ').html(" ")；$(' # upload _ costime ').html(" ")；var _ option={ URL : _ progress _ URL，data: { guid: _guid }，dataType: 'xml '，type: 'post '，before send : function(){ $(' # back _ panel ').fadeTo('fast '，' 0.5 ')；$(“# upload _ panel”).fadeIn(' 1000 ')；}，成功：函数（响应){ if ($(响应)。查找('根中止')。text()==' true '){ $(' # upload _ panel ').淡出(“快速”)；$('#back_panel ').淡出(1000)；窗户。clear interval(_ timer)；} else if ($(响应)。查找(“根无”).text()=='无文件){ } else { var _percent=($(响应)。查找('根百分比')。text()* 100)；var _speed=$(响应)。查找("根速度")。text()；var _fileSize=$(响应)。查找('根文件大小')。text()；var _upload_costTime=$(响应)。查找('根成本时间')。text()；if(parent(_ 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(parent(_ FileSize)/1024/1024 1024){ _ FileSize=ljq。tofix(_ FileSize/1024/1024)' Mb '；} else { _ fileSize=ljq。tofix(_ fileSize/1024/1024/1024)' Gb '；} if(_ upload _ cost time 1000){ _ upload _ cost time=_ upload _ cost time '毫秒；} else if(_ upload _ cost time/1000 60){ _ upload _ cost time=parsent(_ upload _ cost time/1000)'秒_上传_成本时间% 1000 '毫秒；} else { _ upload _ cost time=parsent(_ upload _ cost time/1000/60)'分parsent((_ upload _ cost time % 60000)/1000)秒_上传_成本时间% 1000 '毫秒；} $(“# upload _ progress”).css('width '，Parseint(_ percent)' % ')；$(' #完成百分比')。html(")完成百分比：' ljq。tofix(_ percent)' % ')；$(“# upload _ speed”).html(")上传速度：' _ speed '/sec ')；$('#upload_fileName ').html(")文件名称：' $(响应)。查找(“根文件名”).text())；$('#upload_fileSize ').html(")文件大小：' _ FileSize)；$(' # upload _ costime ').html(")上传耗时：' _ upload _ cost time)；if(_ percent=100){ window。clear interval(_ timer)；$(' #完成百分比')。html(' span style=' color : green；'文件上传完成/span’)；} if(_ cancel){ window。clear interval(_ timer)；} } }，错误：函数(){ } }；_timer=window.setInterval(函数(){ $)。Ajax(_ option)；}, 1000);});});以上为代码的主要部分。

Asp.net单文件是带进度条上传的，不是任务控件，也不是flash类型的上传，完全是ASP.NET、js、css上传的。源代码是开发beta版，需要使用的用户需要注意修改配置文件。

姚佳韵：http://霞仔。JB 51。net/201509/马钰/ASP _ net _进度条(JB 51。net)。rar