zoukankan      html  css  js  c++  java
  • ASP.NET File Upload with *RealTime* 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 ...

    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 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?

  • 相关阅读:
    iOS布局进化史
    thinkphp5.0 文章详情页 上一篇 下一篇
    Thinkphp 3.2中文章详情页的上一篇 下一篇文章功能
    WebSocket协议:5分钟从入门到精通
    Nginx实战之反向代理WebSocket的配置实例
    nginx服务器配置/websocket nginx 配置笔记
    使用nginx作为websocket的proxy server
    看完让你彻底搞懂Websocket原理
    本地phpstudy时常停机连接失败,php.ini文件中9000端口问题
    python 发邮件
  • 原文地址:https://www.cnblogs.com/ywqu/p/1304489.html
Copyright © 2011-2022 走看看