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

1、asp.net无刷新文件上传并显示进度条的实现方法及思路这篇文章详细介绍了无刷新文件上传并显示进度条的思路和代码，有需要的朋友可以参考一 下相信通过asp.net的服务器控件上传文件在简单不过了，通过ajaxtoolkit控件实现上传进度也不是什么难事, 为什么还要门己辛辛苦苦來实现呢？我并不否认”拿來主义“，只是我个人更喜欢凡是求个所以然。木篇 将阐述通过html, ihttphandler和ihttpasynchandler实现文件上传和上传进度的原理，希望对你有多帮助。效果图：http:/localhost:2978/asyncrequest.htm - windows i. .ox“旨

2、http：/localhost:2978伽汀出e p百搜d:documentsand厂ib麵釦妥銚”工帥” ”£ 本地 intranet等待 http:/localhost:29tf 本文涉及到的知识点：1 前台用到 htmlajaxjqueryjquery ui2后台用到一般处理程序(ihttphandler)和一般并步处理程序(ihttpasynchandler),并涉及到”推模式“一. 创建html网页1在创建的web t程中添加一个html文件,命名为uploadfile.htm,在头文件中引入jqueryjquery ui复制代码代码如卞:<link href=,st

3、yles/jquery-ui-1.8.16.custom.css,1 rel=,lstylesheetn type=,text/cssh /><script src=nscripts/jquery-1.6.2.min.js” type=htext/javascriptn></script><script src=,scripts/jquery-ui-1.8.16.custom.min.js" type=ntext/javascriptnx/script>2.关于无刷新文件上传通过ajax是不能上传文件的，无刷新上传是靠隐藏的讦rame來实现的

4、复制代码代码如下：<form id=nform" target = "framefileupload1' enctype=,multipart/form-data,><div id=hprogressbarh style=hfontsize: lem;,x/div>vinput type=,file" id="fileuploadh name=,lfileuploadh /><span idiprogressvalwx/span><iframe id=,framefileuploadh name=,

5、lframefileuploadh style=,ldisplay:none;” ></iframe><br /><input type=nsubmitn value=m上传11 jd = "submit'1/</form>要将form标签的target属性设置为iframe的id,当然别忘了将form的enctype设置为multipart/form-data复制代码代码如下：是用來显示上传文件时的进度条 在js中加入如下处理：复制代码代码如下：<script type=,text/javascript,>$(fu

6、nction () sfsubmit'tbuttono;$("#fileupload").button);)；</script>此时效果:q 1 <o d -4-5 s o 1 d -4- -cz： j-endows internet e.b8 http：/localhost:3436/0ploadfile. htmv廿http：/localhost：3wplo.arb（s）n（o：»b.ift.io誠intranet'厂 ww：.二. 实现文件上传添加一个一般处理程序，命名为uploadfilehandler.ashx复制代码代

7、码如下:public void processrequestfhttpc on text context)如果提交的文件名是空，则不处理讦(context.request.files.count = 0 11 string.lsnullorwhitespace(context.request.files0.filename) return;获取文件流stream stream = con text. request.files0n putstream;获取文件名称string filename = path.getfilename(context.request.fileso.filename

8、);声明字节数组byte buffer;为什么是4096呢？这是操作系统中最小的分配空间，如果你的文件只有100个字节，瓦实它占用的空间是4096个字节int buffersize = 4096;获取上传文件流的总长度long totallength = stream.length;已经写入的字节数，用于做上传的百分比long writtensize = 0;创建文件using (filestream fs = new filestream("c:" + filename, filemode.create, fileaccess.write)如果写入文件的字节数小于上传的总

9、字节数，就一直写，直到写完为止while (writtensize < totallength)如果剩余的字节数不小于最小分配空间讦(totallength - writtensize >= buffersize)用最小分配空间创建新的字节数组buffer = new bytebuffersize;else用剩余的字节数创建字节数组buffer = new bytetotallength - writtensize;读取上传的文件到字节数组stream.readfbuffec 0, buffer.length);将读取的字节数组写入到新建的文件流中fs.write(buffer,

10、0, buffer.length);増加写入的字节数writte nsize += buffer. le ngth;计算当前上传文件的冇分比long percent = writtensize * 100 / totallength;在form中添加action和method属性,修改之后的复制代码代码如下：<form action=huploadfilehandler.ashx” method=hpostn id=,formh target = 'ramefileupload" enctype=nmultipart/form-datah>这样文件上传就完成了。三

11、、实现文件上传的进度显示我的思路：文件上传的处理过程中，是不可以在处理过程中将信息传冋客户端的，只有当所有的处理都完毕之后 才会传回客户端，所以如果是在上面的处理程序中药 入context.response.write(percent);不可能得到处理 的过程，只能等到处理结束后，客户端一次性得到所有的值。要想得到处理过程中的值，我的解决是这样，在文件上传时，要开启另一个请求，来获取进度信息。 而这个请求是异步的，我指的是客户端异步请求和服 务端异步处理。因为要涉及到两个不同的请求处理程 序之间信息的传递，将“处理文件上传的程序”得到的进度信息传递给“处理进度请求的程序“，而“处理进度 请求的

12、处理程序,'要依赖于,'处理文件上传的处理程序”。处理图：首先客户端同时（几乎是）发出两个请求，一个是文件上传，一个是进度请求。由于“处理请求进度的程 序”是异步处理的，当该程序没有信总发给客户端时，我们让它处于等待状态，这里有点像tcp,这样客户 端跟服务器就一直处于连接状态。当”处理文件上传的程序”开始处理时,通过把进度值赋值给”处理请求 进度程序“的异步操作的状态，并触发“处理请求进度的程序“返回值给客户端。客户端获取进度值，并处理。 这样一次暗求进度值的请求就结束了，我们知道服务器是不会主动给客户端发送信息的，只有客户端请求, 服务器才会响应。显然，要想在文件保存的过程

13、屮向客户端发送进度信息，客户端得到每得到一个返回结 果，都是一次请求。为了得到连续的请求值，客户端再向“处理请求进度的程序”发出请求，依次循环,知道文 件上传结束。技术实现：异步处理用到接口 ihttpasynchandler,新建-个般处理程序，命名为requestprogressasynchandler.ash x,将默认的接口改为ihttpasynchandler复制代码代码如下：public class requestprogressasynchandler : ihttpasynchandlerpublic void processrequest(httpc on text con

14、text)public bool isreusablegetreturn false;#region ihttpasynchandler 成员public lasyn cresult begi nprocessrequest(httpc on text con text, asyn ccallback cb, object extra data)throw new notlmplementedexception();throw new notlmplementedexception();#en dregi onbeginprocessrequest和endprocessrequest是两个核心

15、的方法，其他的两个不用处理。当该处理程序处理请求时，beginprocessrequest是第一个被调用的函数，返回一个包含并步状态信息的对象，该对象是lasyncresult类型，是实现异步的关键，用于控制什么时候调用endprocessrequest来结束处理程序的等待状态，begi nprocessrequest被调用之后，程用就 处于等待状态。endprocessrequest是在结束请求吋的处理函数，通 过该函数可以向客户端写入信息。实现接 口 lasyncresult复制代码代码如f：public class asyncresult : lasyncresult/标示异步处理的状态

16、private bool iscomplete = false;保存异步处理程序中的http匕卜文private httpc on text con text;片步回调的委托private asynccallback callback;ill <summary>iii获取或设置保存下载文件的百分比数值部分iii </summary>public long percentnumber;public asyncresult(httpcontext context, asynccallback callback)this.c ontext = context;this.cal

17、lback = callback;iii <summary>/向客户端写入信息iii </summary>public void send()this.c on text.resp on se.write(perce ntnumber);iii <summary>/完成异步处理，结束请求iii </summary>public void docompletetask()讦(callback != null)callback(this);/会触发处理程序小的endprocessrequest函数，结束请求this.iscomplete = true

18、;#region lasyncresult 成员public object asynestateget return null; public system.threading.waithandle asyncwaithandleget return null; public bool completedsynchronouslyget return false; public bool iscompletedget return iscomplete; #endregi on修改 requestprogressasynchandler.ashx 文件: 复制代码代码如下:public cla

19、ss requestprogressasynchandler : ihttpasynchandleriii <summary>/保存异步处理状态信息的集合iii </summary>public static list<asyncresult> asyncresults = new list<asyncresult>();public void processrequest(httpc on text con text)public bool isreusablegetreturn false;#region ihttpasynchandler

20、成员public lasyn cresult begi nprocessrequest(httpc on text con text, asyn ccallback cb, object extradata)asyn cresult result = new asyncresult(c on text, cb);asyncresults.add(result);return result;public void endprocessrequestflasyncresult result)保证集合中只用一个元素asyncresults.clear();asyncresult ar = (asyn

21、cresult)result;ar.send();#en dregi on在 uploadfilehandler.ashx 添加如下代码：复制代码代码如下：private static void sendpercenttoclient(long percent)当上传完毕后，保证处理程序能向客户端传回while (requestprogressasynchandler.asyncresults.count = 0 && percent = 100)因为木处理程序和"处理请求进度的程序”是并发的，不能保证requestprogressasynchandler.async

22、results一定含有子项if (requestprogressasynchandler.asyncresults.count != 0)requestprogressas yn cha ndler.as yn cresults0.perce ntnumber = perce nt;requestprogressasy ncha ndler.asy ncresults0docompletetask();在函数processrequest中加入以上方法：复制代码代码如下：计算当前上传文件的百分比long percent = writtensize * 100 / totallength;sen d perce nttoclie nt(perce nt);服务端ok!修改客户端，添加js处理函数：复制代码代码如下：function requestprogress() $.post(hrequestprogressasynchandler.ashx舄 funct