Asp.net mvc 3 实现进度条上传思路

     最近在做asp.net mvc 大文件上传,但是每次大文件上传的响应时间都很长,没有提示就给不了用户良好的体验,所以想了想还是必须在文件上传时显示进度条,但是asp.net默认的文件上传管道是无法显示进度条的。所以就必须自己手动创建一个接收管道。实现的方式有2种,一种是写一个类继承IHttpModule接口然后实现其中的方法,还有一种就是直接在Global.asax里面的Application_BeginRequest写上传文件的方法。

     在写文件接收方法的时候应该分块来接收文件,然后在同时保存文件的状态,这时候就要注意如何保存文件的状态,以便客户端获取,我想了几种方式总结出来

1、可以使用Application变量。Application对象的作用范围是整个全局,也就是说对所有用户都有效。其常用的方法用Lock和UnLock。

Application.Lock(); 

Application["GUID"]=upload;

Application.UnLock(); 

2、使用Session变量。想必这个肯定是大家使用中最常见的用法了,其操作与Application类似,作用于用户个人,所以,过量的存储会导致服务器内存资源的耗尽。

Session["GUID"]=upload;

  

3、使用Cookie变量。这个也是大家常使用的方法,与Session一样,其实是对每一个用户而言的,但是他们有个本质的区别,即Cookie是存放在客户端的,而Session是存放在服务器端的。而且Cookie的使用要配合ASP.NET内置对象Request来调用。

            HttpCookie myCookie = new HttpCookie(cookieName);
            myCookie = HttpContext.Current.Request.Cookies[cookieName];
            HttpContext.Current.Response.Cookies.Add(myCookie);
            HttpCookie myCookie = new HttpCookie(cookieName);
            myCookie = HttpContext.Current.Request.Cookies[cookieName];

  

4、使用Cache,但是.NET中Cache有两种调用方式:HttpContext.Current.Cache 和 HttpRuntime.Cache。下面的是MSDN的解释。

HttpContext.Current.Cache:为当前 HTTP 请求获取Cache对象。
HttpRuntime.Cache:获取当前应用程序的Cache。
HttpContext:封装有关个别HTTP请求的所有HTTP特定的信息,HttpContext.Current为当前的HTTP请求获取HttpContext对象。
HttpRuntime:为当前应用程序提供一组ASP.NET运行时服务。

其实HttpRuntime.Cache相当于就是一个缓存具体实现类,这个类虽然被放在了System.Web命名空间下,但是非Web应用下也是可以使用;HttpContext.Current.Cache是对上述缓存类的封装,由于封装到了HttpContext类中,局限于只能在知道HttpContext下使用,即只能用于Web应用。

既然我们这边是采用mvc3是web应用程序,那我们就都可以使用,但是我建议既然是web应用程序还是使用HttpContext.Current.Cache.

HttpContext.Current.Cache[Guid]

-------------------------------------------------------------------------------------------------------------------------------------------

以上4种都可以算是全局变量,但是有的并不是很好的方案,建议使用第一种和第四种来存储数据。我是采用Cache来存储文件进度的信息的。

这时候又有一个问题了。我们应该怎么知道当前上传的是什么应用程序呢?我使用的是GUID来标识,这样上传上来的程序就有唯一的标识符了。多个用户同时上传也不会有问题了。

在客户端方面我采用了Jquery 版本号 1.64 、 jquery.blockUI.js 版本号 1.23、 jquery.form.js 版本号 2.84 、jquery-ui.js 版本号 1.8.16

 

用jquery.blockUI来实现弹出层,jquery.form用来提交数据,Jquery 的$.ajax方法来获取当前文件进度的状态Json,jquery-ui来实现进度条信息。

下面是MVC3大文件上传的截图,这篇文章主要是讨论文件上传实现进度条的思路并没有提供demo进行下载有什么问题可以留言。

 

posted on 2011-09-21 10:32 豆浆咖啡 阅读(1806) 评论(12) 编辑 收藏

评论

#1楼 2011-09-21 11:07 garfieldzf      

开源了可以让大家更多的去学习前台。  回复 引用 查看   

#2楼 2011-09-21 13:19 强盗罗吉      

这种方式很不现实,实现Application_BeginRequest的方法说的很简单,实际上怎么做呢?我还没在博客园上看到把这个写清楚的,也许LZ可以把这块多讲解下
你的截图是在本地测试得把,我觉的真实的环境受不了这样用ajax多次请求服务器,实际的项目里面都是大都采用flash上传,客户端把文件分成字节上传,没有必要多次请求服务器。
 回复 引用 查看   

#3楼[楼主] 2011-09-21 14:06 豆浆咖啡      

@强盗罗吉
其实在Application_BeginRequest里面写和继承IHttpModule写的是一样的方法,只是不必要在在WEB.config节点下添加httpmodules <httpModules>
<add name="FileUploadModule" type="SongCMS.Utility.FileUpload.FileUploadModule"/>
</httpModules> 抱歉,刚才之所以说简单是不需要继承IHttpModule在实现其中的方法,现在改掉了,至于你说真实环境下的问题,我是真没有测试过。有待观察!
 回复 引用 查看   

#4楼 2011-09-21 14:57 heke0928      

强烈希望楼主能提供学习源码!或给我发邮箱至heke0828@126.com。谢谢!  回复 引用 查看   

#5楼 2011-09-21 16:36 孔令星      

楼主能发一份源码到我邮箱吗? kong_ling_xing@126.com 。谢谢。  回复 引用 查看   

#6楼 2011-09-21 23:33 玄歌      

过于复杂,这类上传我仔细研究过,用swfupload之类最好。进度处理,包括两部分:上传是根据客户端上传的字节数来显示进度,与服务端没有关系。上传之后的处理,则需要轮询服务器的进度,一般以3秒左右刷新一次即可,服务器也能够承受。
这里很常见的场景,是上传Excel文件导入到数据库。
进度条则直接使用jquery ui的进度条,上传和导入两个部分各占50%的样子,界面观感比较统一。
上传图片和文件,是几乎所有用户都要做的工作,所以尽量的不要使用服务端轮询的方式显示进度。上传之后的导入,这种事情往往是少数用户做的事情,可以考虑实时获取服务端进度。
 回复 引用 查看   

#7楼[楼主] 2011-09-22 09:00 豆浆咖啡      

@玄歌
上传处理的时候可以将文件分块保存在一个临时文件夹而不是内存中在这个过程中保存他们的进度状态,并获取服务器中文件的进度状态。
 回复 引用 查看   

#8楼 2011-09-22 10:02 forflying      

楼主能否发一份源码给我:forflying2009@163.com .学习一下。谢谢  回复 引用 查看   

#9楼 2011-09-23 09:03 Burgess Li      

好东西,能发一份给我吗?1251714750@qq.com
万分感谢
 回复 引用 查看   

#10楼 2011-09-26 23:48 玄歌      

@豆浆咖啡
这样理解是错误的。iis最初是将上传的整个文件保存在内存,然后一次写入到磁盘;之后改为缓存在文件里。但不管怎样,我们在服务端收到的文件是已经上传完毕了的,你的进度条只是“保存”时的进度而不是上传进度,上传过程花费的时间显然更多。
若仅希望在服务端处理,除非自己解析,这个过程很复杂,而且并非官方推荐的方式。
目前最好的选择还是客户端上传方案。
 回复 引用 查看   

#11楼[楼主] 2011-09-29 13:15 豆浆咖啡      

@玄歌
我就是在上传的时候进行了分块处理的呀?不是你所说的上传了所有的字节,然后在保存的时候进行分块保存...做一个小小的测验就可以知道我们所说的到底是谁对谁错了。比如我上传一个1G的文件。根据我写的代码他马上就会显示进度条,而不是等到上传都结束了才显示出进度条的!
 回复 引用 查看   

#12楼[楼主] 2011-11-20 00:20 豆浆咖啡      

@玄歌
确实是全部文件上传,只是上传的时候我们记录了上传的时候的状态,确实是保存时候的进度...不好意思,以前回答错误了!
 回复 引用 查看   

<2012年2月>
2930311234
567891011
12131415161718
19202122232425
26272829123
45678910

公告

昵称:豆浆咖啡
园龄:2年
粉丝:6
关注:1

统计

  • 随笔 - 31
  • 文章 - 0
  • 评论 - 267

搜索

 

常用链接

我的标签

随笔分类

随笔档案

最新评论

阅读排行榜

评论排行榜

推荐排行榜