ASP.NET File Upload with *Real-Time* Progress Bar
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 (SWFUpload, FileUp, Flajaxian FileUploader, RadUpload, NeatUpload, ASP.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 ...
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.
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 here.
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
如果你认为此文章有用,请点击底端的【推荐】让其他人也了解此文章,
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述