Asp.Net不刷新文件上传显示进度条的实现方法和思路

我相信通过Asp上传文件很简单。Net的服务器控件，并不难通过AjaxToolkit控件实现上传进度。为什么要自己努力去实现呢？我不否认“takenism”，但我个人更愿意问为什么。本文将讲解通过Html、IHttpHandler和IHttpAsyncHandler实现文件上传和上传进度的原理，希望对大家有所帮助。效果图：

本文涉及的知识点：1。前台使用Html、Ajax、jQuery、jQuery UI2.后台使用通用处理程序(IHttpHandler)和通用异步处理程序(IHttpAsyncHandler)，涉及“推送模式”；1.创建Html网页；1.在创建的网站项目中添加一个HTML文件。名为UploadFile.htm的JQuery被引入到头文件中。JQuery UI复制代码的代码如下： link href=' styles/JQuery-UI-1 . 8 . 16 . custom . CSS ' rel='样式表' type=' text/CSS '/script src=' http 3360 scripts/JQuery-1 . 6 . 2 . min . js ' type=' text/JavaScript '/script src=' http : scripts/JQuery-UI-1 . 8 . 16 . custom . min . js ' type/divinput type=' file ' id=' file upload ' name=' file upload '/span id=' progress value '/span frame id=' framefile upload ' name=' framefile upload ' style=' display : none；'/iframe br/input type=' submit ' value=' upload ' id=' submit '/form要将form标记的目标属性设置为iframe的id，当然不要忘记将表单的enctype设置为multipart/form-data。复制代码如下： div id='进度条' style=' font-size: 1em。/div用于上传文件时显示进度条。给JS增加如下处理：复制代码如下： Script Type=' text/JavaScript ' $(function(){ $(' # submit '))。button()；$('#fileUpload ')。button()；});/此时脚本效果：(9501 . 163.com)。

第二，添加一个名为UploadFileHandler.ashx的通用处理程序，实现文件上传。复制代码如下： public void process request(httpcontext context){//如果提交的文件名为空，那么如果(context . request . files . count==0 | | string . isnullblazes(context . request . files[0])。filename))返回不被处理；//获取文件流stream=context . request . files[0]。inputstream//获取文件名字符串filename=path . getfilename(context . request . files[0])。文件名)；//声明字节数组byte[]缓冲区；//为什么是4096？这是操作系统中分配的最小空间。如果你的文件只有100字节，它实际上占用了4096字节。int bufferSize=4096//获取上传文件流的总长度long TotaL=stream。长度；//已经写入的字节数，用于上传的百分比为longwritensize=0；//使用(filestream fs=new filestream(@ ' c : ' filename，filemode)创建文件。创建，文件访问。write)){//如果写入文件的字节数小于上传的总字节数，则始终写入。While(写入大小总计长度){//如果剩余字节不小于最小分配空间，如果(写入大小=缓冲区大小){//创建一个新的字节数组缓冲区=具有最小分配空间的新字节[bufferSize]；} else //用剩余字节创建一个字节数组缓冲区=new byte[total ength-writensize ];//将上传的文件读入字节数组stream.read (buffer，0，buffer . length)；//将读取的字节数组写入新创建的文件流fs.write (buffer，0，buffer . length)；//增加写入的字节数。writensize=buffer.length//计算当前上传文件的百分比。长百分比=写入大小* 100/总长度；}}}将action和method属性添加到表单中，修改后的复制代码如下： form action=' uploadfile handler . ashx ' method=' post ' id=' form ' target=' frame file upload ' enctype=' multipart/form-data '，这样文件上传就完成了。第三，实现文件上传的进度说明了我的想法：在文件上传的处理过程中，信息在处理过程中是无法传输回客户端的，只有在所有处理完成后才会传输回客户端，所以如果写上下文。响应。在上述处理程序中写入(百分比)；这是一个无法处理的过程，客户端只能在处理完成后一次获取所有的值。为了在处理过程中获取值，我的解决方案是在上传文件时打开另一个请求来获取进度信息。这个请求是异步的，我指的是客户端的异步请求和服务的异步处理。因为它涉及到两个不同请求处理程序之间的信息传递，“文件上传处理程序”获得的进度信息传递给“进度请求处理程序”，而“进度请求处理程序”依赖于“文件上传处理程序”。加工图：

首先，客户端同时发送两个请求(几乎)，一个是文件上传，另一个是进度请求。因为‘处理请求进度的程序’是异步处理的，当程序没有信息要发送给客户端时，我们就把它置于等待状态，这有点像Tcp，这样客户端和服务器总是连接的。当“处理文件上传程序”开始处理时，将进度值分配给“处理请求进度程序”的异步操作状态，并触发“处理请求进度程序”将该值返回给客户端。客户端获取进度值并进行处理。这样，对进度值的请求就结束了。我们知道服务器不会主动向客户端发送信息，只有当客户端请求时，服务器才会响应。显然，如果您想在文件保存过程中向客户机发送进度信息，客户机每次得到返回结果时都会收到一个请求。为了获得连续的请求值，客户端向“请求进度处理程序”发送请求，并依次循环，直到文件上传完成。技术实现：接口IHttpAsyncHandler用于异步处理，创建了一个新的通用处理程序requestprogresssynchandler . ashx。将默认接口更改为IHttpAsyncHandler。按照如下方式复制代码：公共类request prograsasynchandler : ihttpasynChandler { public void process request(httpcontextconte。XT){ } public bool IsReuse { get { return false；}} #region IHttpAsyncHandler成员public iasyncresultbeginprocesrequest(httpcontext context，async callback CB，object extra data){ throw new notimplementdexception()；} public void EndProcessRequest(IAsyncResult结果){ throw new notimplementdexception()；} # endregion } beginprocessrequest和EndProcessRequest是两个核心方法，另外两个不需要处理。当处理程序处理请求时，BeginProcessRequest是第一个被调用的函数，它返回一个包含异步状态信息的对象。该对象为IAsyncResult类型，是实现异步的关键，用于控制何时调用EndProcessRequest结束处理程序的等待状态。调用BeginProcessRequest后，程序处于等待状态。EndProcessRequest是请求末尾的一个处理函数，通过它可以将信息写入客户端。

实现接口IAsyncResult复制代码代码如下：公共类异步结果： IAsyncResult {//标示异步处理的状态private bool isComplete=false//保存异步处理程序中的超文本传送协议(超文本传输协议的缩写)上下文私有HttpContext上下文；//异步回调的委托私有异步回调回调；///摘要///获取或设置保存下载文件的百分比数值部分////汇总公共长百分比数字公共AsyncResult(HttpContext上下文，AsyncCallback回调){ this . context=context this . callback=回调；} ///摘要///向客户端写入信息////汇总公共void Send(){ this。语境。回应。写入(百分比数)；} ///摘要///完成异步处理，结束请求////汇总公共void docompletettask(){ if(回调！=null)回调(这个)；//会触发处理程序中的EndProcessRequest函数，结束请求this.isComplete=true} #区域IAsyncResult成员公共对象AsyncState { get { return null} }公共系统。线程处理wait handle AsyncWait handle { get { return null；} } public bool已完成同步{ get { return false} } public bool完成{ get { return完成；} } #endregion }修改requestprogressasynchrandler。ashx文件：复制代码代码如下：公共类RequestProgressAsyncHandler : IHttpAsyncHandler {///summary///保存异步处理状态信息的集合////汇总公共静态ListAsyncResult AsyncResults=new ListAsyncResult()；公共无效进程请求(HttpContext上下文){ } public bool IsReuse { get { return false；} } #地区IHttpAsyncHandler成员public IAsyncResult begin processrequest(HttpContext context，AsyncCallback cb，object Extrata){ async result=new async result(context，CB)；异步结果添加(结果);返回结果；} public void EndProcessRequest(IAsyncResult结果){ //保证集合中只用一个元素异步结果clear()；AsyncResult ar=(AsyncResult)结果；ar .send()；} #endregion }在UploadFileHandler.ashx添加如下代码：复制代码代码如下：私有静态void SendPercentToClient(长百分比){ //当上传完毕后，保证处理程序能向客户端传回while(requestprogressasynchrandler .异步结果。Count==0%==100){ }//因为本处理程序和'处理请求进度的程序'是并发的，不能保证RequestProgressAsyncHandler .异步结果一定含有子项if(request progressasynchrandler .异步结果。计数！=0){ requestprogressasynchrandler .AsyncResults[0]。百分比数=百分比；RequestProgressAsyncHandler .AsyncResults[0]。docompletettask()；} }在函数ProcessRequest中加入以上方法：复制代码代码如下：//计算当前上传文件的百分比长百分比=书面张力* 100 /总长度；发送百分比客户（百分比);服务端好的！修改客户端，添加射流研究…处理函数：复制代码代码如下：函数RequestProgress() { $ .post(' request progress asynchrandler。ashx '，函数（数据，状态){ if(状态==“成功”){ $(“# progress value”).文本（数据"%");data=parseInt(数据);$('#progressBar ').进度条({ value : data })；//JQuery UI设置进度条值//如果进度不是100,则重新请求如果(数据！=100){请求进度()；} } });}在形式中添加事件omsubmit的处理函数为请求进度复制代码代码如下：表单操作=' uploadfile处理程序。ashx ' on submit=' request progress()；'方法=' post ' id=' form ' target=' frame file upload ' enctype=' multipart/form-data '补充几点：1.默认Asp .网允许的上传文件的大小是4M，可以在Web.config中修改其大小限制复制代码代码如下：系统。web Httpruntime MaxRequestLength=' 444444 '/system。WebMaxRequestLength的单位是知识库2 .在IE 8.0测试中，在文件上传完毕后，状态栏还处于请求中

反正不是后台还在请求，所以放心，只要你把鼠标在按钮上来回移动浏览，就没了，这可能是JQuery UI的问题。FF和Chrom下没有这样的问题，就是显示效果会差一点，但是上传还是可以的。源代码下载：UploadFileDemo.rar。