博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ASP.NET File Upload with *Real-Time* Progress Bar
阅读量:6006 次
发布时间:2019-06-20

本文共 4515 字,大约阅读时间需要 15 分钟。

After sufficiently embarrassing myself with my earlier post, I decided it was high time I spend a little bit more time understanding this problem.  And lo and behold Jon Galloway has already written up a nice survey on the topic.  So to bone up on the issues I followed all of the links Jon provided as well the ones provided by all of the one-off emails I received in response to my previous post (thanks everyone).

Of all the upload components I checked-out (SWFUploadFileUpFlajaxian FileUploaderRadUploadNeatUploadASP.Net File Upload/Download Module, etc...) I was the most interested in the last 2 (NeatUpload and ASP.Net File Upload/Download Module).  They are both free, have my kind of licensing and come with the full source code.

So I downloaded both of these components and played around with plugging them into the demo app I blogged about previously.  Both components include progress bar web controls, but I already have a progress bar widget that I really like.  So my focus was on seeing what it would take to leverage only the HttpModule portion of these components and checking out how I could have the module interface with my progress bar.  Like I mentioned previously, I want something that looks like this ...

image

image

image

 

NeatUpload Vs. Darren Johnstone's ASP.Net File Upload/Download Module

Both NeatUpload and Darren Johnstone's components seem to have a rather large following, but I chose to see how I could extend Darren's control because it was already using AJAX plus a custom HttpHandler to communication the upload progress back to the client.  And that seems really close to what I wanted.  If this doesn't pan out, NeatUpload actually seems to have a larger following so I will probably go back and revisit this topic using NeatUpload instead.

 

How it Works

From what I can tell, Darren's component basically works by injecting a hidden INPUT element into the form that contains the file INPUT(s).  The value of the hidden element is a Guid that contains a well-known prefix (Darren uses the token ::DJ_UPLOAD_ID::).  Then as his custom HttpModule is processing the request, it looks to see if the form contains this token.  If so, he tucks the upload progress information into memory using the id value as the index.  Then, if a client wants to query the upload progress, they can query his component using this guid as the look-up value. 

Below is a screen capture of the request body.  The hidden field is highlighted in yellow.       

image  

 

Querying the Upload Status

The second cool thing about Darren's control is that he has included a custom handler for accessing the progress of an upload.  This makes is pretty simple to get at the upload progress using your favorite AJAX library.  Below is a small snippet of JavaScript that I am using in my demo app for getting at the status of the current upload.   

1: intervalID = window.setInterval(function(){
2: 
3:     var request = new Sys.Net.WebRequest();
4:     request.set_url('UploadProgress.ashx?DJUploadStatus=' + token + '&ts=' + new Date().getTime());
5:     request.set_httpVerb('GET');
6:     request.add_completed(function(executor){
7:
8:         //  the progress is returned as xml
9:         var e = executor.get_xml().documentElement;
10:         var empty = e.getAttribute('empty');
11:
12:         if(!empty){
13:
14:             //  extract the attributes I am interested in
15:             var percent = e.getAttribute('progress');
16:             var file = e.getAttribute('file');
17:             var kbs = Math.round(parseInt(e.getAttribute('bytes')) / 1024);
18:             var size = Math.round(parseInt(e.getAttribute('size')) / 1024);
19:
20:             //  update the progressbar to the new value
21:             progressBar.set_percentage(percent);
22:             //  upadte the message
23:             updateMessage('info', 'Uploading ' + file + ' ... ' + kbs + ' of ' + size + ' KB');
24:
25:             if(percent == 100){
26:                 //  clear the interval
27:                 window.clearInterval(intervalID);
28:             }
29:        }
30:     });
31:
32:     //  invoke the request
33:     request.invoke();
34:
35: }, 1000);

 

Sample App

No live demo this time, but I do have a sample application.  You can download it .

 

Conclusion

Well, that's about it.  I am curious, how have you handled file uploads in the web apps you have worked on?  3rd party component?  Something home-grown?  One of the components I mentioned above?

 

本文转自灵动生活博客园博客,原文链接http://www.cnblogs.com/ywqu/archive/2008/10/06/1304489.html,如需转载请自行联系原作者

你可能感兴趣的文章
新浪微博的账号登录及api操作
查看>>
淘宝code
查看>>
机器学习-决策树
查看>>
内存池技术畅想
查看>>
计算机网络笔试面试常考考点
查看>>
MySQL Binlog的介绍
查看>>
[c++] 用宏定义一个函数
查看>>
微软语音输入法的图标隐藏了在怎么显示出来
查看>>
安装express
查看>>
创建服务类PO
查看>>
使用 Windows PowerShell 连接到 Lync Online
查看>>
作业1 对这门课的希望和自己的目标
查看>>
python基础知识
查看>>
python - os.path模块
查看>>
文件操作IO
查看>>
ML_Scaling to Huge Datasets & Online Learning
查看>>
zookeeper的安装与使用
查看>>
php基础知识【函数】(5)正则preg
查看>>
C# 接口的作用浅谈举例
查看>>
python字符串内建函数
查看>>