【无刷新】Asp.Net 无刷新文件上传并显示进度条的实现方法及思路-上传-进度条

欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【Asp.Net 无刷新文件上传并显示进度条的实现方法及思路】，下面是详细的讲解！

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

相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事，为什么还要自己辛辛苦苦来 实现呢？我并不否认”拿来主义“，只是我个人更喜欢凡是求个所以然。本篇将阐述通过Html，IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理，希望对你有多帮助。

效果图：

本文涉及到的知识点：
1.前台用到Html,Ajax,JQuery,JQuery UI

2.后台用到一般处理程序(IHttpHandler)和一般异步处理程序(IHttpAsyncHandler)，并涉及到”推模式“

一、创建Html网页
1、在创建的Web工程中添加一个Html文件，命名为UploadFile.htm，在头文件中引入JQuery,JQuery UI

2、关于无刷新文件上传

通过Ajax是不能上传文件的，无刷新上传是靠隐藏的iframe来实现的

要将form标签的target属性设置为iframe的id,当然别忘了将form的enctype设置为multipart/form-data

是用来显示上传文件时的进度条

在JS中加入如下处理：

此时效果:

二、实现文件上传
添加一个一般处理程序，命名为UploadFileHandler.ashx

在form中添加action和method属性，修改之后的

这样文件上传就完成了。

三、实现文件上传的进度显示
我的思路：

　　文件上传的处理过程中，是不可以在处理过程中将信息传回客户端的，只有当所有的处理都完毕之后才会传回客户端，所以如果是在上面的处理程序中写 入context.Response.Write(percent);是不可能得到处理的过程，只能等到处理结束后，客户端一次性得到所有的值。

　　要想得到处理过程中的值，我的解决是这样，在文件上传时，要开启另一个请求，来获取进度信息。而这个请求是异步的，我指的是客户端异步请求和服 务端异步处理。因为要涉及到两个不同的请求处理程序之间信息的传递，将"处理文件上传的程序"得到的进度信息传递给"处理进度请求的程序"，而"处理进度 请求的处理程序"要依赖于"处理文件上传的处理程序"。处理图：

　　首先客户端同时(几乎是)发出两个请求，一个是文件上传，一个是进度请求。由于"处理请求进度的程序"是异步处理的，当该程序没有信息发给客户 端时，我们让它处于等待状态，这里有点像Tcp，这样客户端跟服务器就一直处于连接状态。当"处理文件上传的程序"开始处理时，通过把进度值赋值给"处理 请求进度程序"的异步操作的状态，并触发"处理请求进度的程序"返回值给客户端。客户端获取进度值，并处理。这样一次请求进度值的请求就结束了，我们知道 服务器是不会主动给客户端发送信息的，只有客户端请求，服务器才会响应。显然，要想在文件保存的过程中向客户端发送进度信息，客户端得到每得到一个返回结 果，都是一次请求。为了得到连续的请求值，客户端再向"处理请求进度的程序"发出请求,依次循环,知道文件上传结束。

技术实现：
　　异步处理用到接口IHttpAsyncHandler,新建一个一般处理程序，命名为RequestProgressAsyncHandler.ashx,将默认的接口改为IHttpAsyncHandler

BeginProcessRequest和EndProcessRequest是两个核心的方法，其他的两个不用处理。当该处理程序处理请求 时，BeginProcessRequest是第一个被调用的函数，返回一个包含异步状态信息的对象,该对象是IAsyncResult类型,是实现异步 的关键,用于控制什么时候调用EndProcessRequest来结束处理程序的等待状态，BeginProcessRequest被调用之后，程序就 处于等待状态。EndProcessRequest是在结束请求时的处理函数，通过该函数可以向客户端写入信息。

实现接口IAsyncResult

修改 RequestProgressAsyncHandler.ashx文件:

在UploadFileHandler.ashx添加如下代码：

在函数ProcessRequest中加入以上方法：

服务端OK!修改客户端,添加JS处理函数：

在form中添加事件omsubmit的处理函数为RequestProgress

补充几点:
1.默认Asp.Net允许的上传文件的大小是4M,可以在Web.config中修改其大小限制

maxRequestLength的单位是KB

2.在IE 8.0测试中，在文件上传完毕后，状态栏还处于请求中

反正不是后台还在请求，这个放心，只要把鼠标在按钮和浏览上面来回移动几下就没了，可能是JQuery UI 的问题。FF和Chrom下没这个问题，就是显示效果会有点差，但是上传没问题的。

源代码下载：UploadFileDemo.rar

关于Asp.Net 无刷新文件上传并显示进度条的实现方法及思路的用户互动如下：

　　相关问题：急！ASP.NET+Ajax实现视频文件上传带进度条

　　答：我建议用flash的吧，现在有两个比较强大的，一个是swfupload另一个是uploadify，两者都是任何语言都可以使用的，提供了接口，两种我都用了，虽然刚开始研究有些吃力，但研究好了，你会发现，你的最终选择会是这两个，网上的垃圾确实很多。希望可... >>详细

　　相关问题：你好，哥们，请问在asp.net mvc2.0中实现文件上传...

　　答：有个进度条控件！在写一下事件就可以啦！ >>详细

　　相关问题：艾恩Ajax无刷新文件上传 如何更改为根据日期生成随...

　　答：我有修改好的 但是瞎改的 不过完全可以使用的 文件UpLoad_Class.asp 行411 if(arg.length==1){Path = arg[0];Option=0;OverWrite=true;} if(arg.length==2){Path = arg[0];Option=0;OverWrite=true;} if(arg.length==3){Path = arg[0];Option=0;... >>详细