ASP.NET 进度条

Default.aspx

 

 

<% @ Page Language = " C# "  AutoEventWireup = " true "   CodeFile = " Default.aspx.cs "  Inherits = " _Default "   %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title > ASP.NET 进度条 </ title >
     < script  type ="text/javascript" >   
         var  _timer; // 计时器
         var  rid; // Cache的KEY
         var  _xmlHttp;  //
        window.onload  =   function ()
        {
             // 要在load的时候穿创建_xmlHttp对象  不要每次循环的时候来创建 那样很耗费资源
             if  (window.XMLHttpRequest)
            {
                _xmlHttp  =   new  XMLHttpRequest();  // FireFox、Opera等浏览器支持的创建方式
            }
             else
            {
                _xmlHttp  =   new  ActiveXObject( " Microsoft.XMLHTTP " );  // IE浏览器支持的创建方式
            }
          
        }
         // 开始进度条
         function  checkStart()
        {
             // 这里用随机函数来生产唯一的Cache的KEY  也可以用别的方法，只要保证唯一就行（为了防止多用户并发）
             // 唯一的KEY是保证多户（并发）的时候进度条的当前值 不至于混乱
             var  randstr  =  Math.random().toString();  // 这里要toString() 否则replace 会出错
            rid  =   " R "   +  randstr.replace( " 0. " ,  "" );  // 我这里用replace 是为了去掉 “0.” 为了好看
            
            document.getElementById( " tipdiv " ).innerHTML  =   " 启动成功！ " ;
            document.getElementById( " Button1 " ).disabled  =   true ;
             var  newIframe  =  document.createElement( " iframe " );  // 创建Iframe标签 便于启动线程
         
            newIframe.id  =   " iframe "   +  rid;
            newIframe.style.width  =   " 100px " ;
            newIframe.style.height  =   " 100px "
            newIframe.style.display  =   " none " ;
             // 为了兼容firefox 这里要用  document.body.appendChild() 不要直接  document.appendChild();
            document.body.appendChild(newIframe);  // 追加到页面中  等进度条完成后再删除
            document.getElementById( " iframe "   +  rid).src  =   " Start.ashx?rid= "   +  rid;  // 启动  传递cache的KEY
            _timer  =  window.setInterval( " checkProgress() " ,  500 );  // 每0.5秒从Progress.ashx获得Cache的值 也就是进度条的当前值
          
         }
        // 处理进度
         function  checkProgress()
        {
             // 每个页面的KEY 要同步 否则就乱了哦
            _xmlHttp.open( "GET " ,  " Progress.ashx?rid= "   +  rid,  true );
            _xmlHttp.onreadystatechange  =   function ()
            {
                 if  (_xmlHttp.readyState  ==   4 )
                {
                     if  (_xmlHttp.status  ==   200 )
                    {
                         // 解析JSON数据
                         var  jsonStr  =  eval( " ( "   +  _xmlHttp.responseText  +   " ) " );
                         // 这里的600是DIV的宽度 要和返回来的数据进行比例换算
                         var  currentW  =  parseInt(jsonStr.CurrentNum)  *   600   /   100 ;
                         if  (currentW  >=   600 )
                        {
                            window.clearInterval(_timer);  // 完成  关闭计时器
                            document.getElementById( " Button1 " ).disabled  =   false ;
                            document.getElementById( " tipdiv " ).innerHTML  =   " 完成 " ;
                             // 删除Iframe
                            document.body.removeChild(document.getElementById( " iframe "   +  rid));
                             // 完成进度 清空缓存
                            checkdelcache();
                        }
                         // 这里本来是jsonStr.CurrentNum/100*100  但是除以100再乘100 这不很没必要吗  因为我的最大值就是100 
                         // 实际应用还是不要这么写的 因为最大值 不是理想数字
                        document.getElementById( " progressdiv " ).innerHTML  =  jsonStr.CurrentNum  +   " % " ;
                        document.getElementById( " progressdiv " ).style.width  =  currentW  +   " px " ;  // 同步进度条
                    }
                }
            }  
            _xmlHttp.send( null );
        }
         function  checkdelcache()
        {
             // 完成进度 清空缓存
            _xmlHttp.open( " GET " ,  " CacheRemove.ashx?rid= " + rid,  true );
            _xmlHttp.onreadystatechange  =   function ()
            {
                 if  (_xmlHttp.readyState  ==   4 )
                {
                     if  (_xmlHttp.status  ==   200 )
                    {
                         // 空代码
                    }
                }
            }
            _xmlHttp.send( null );
        }
   
     </ script >
</ head >
< body >
    
   
     <!--  进度条的底层 白色背景 -->
     < div  style ="width:600px; height:20px; border:1px solid #000000" >
               <!--  在整个DIV的里面 用宽度表现当前的进度 默认刚开始是0 -->
            < div  style ="background-color:Green; width:0;height:20px; text-align:center"  id ="progressdiv" ></ div >
     </ div >
 
         < input  id ="Button1"  type ="button"  value ="启动"  onclick ="checkStart()"   />
        < div  id ="tipdiv" ></ div >
      
      
</ body >
</ html >

 

Start.ashx

<% @ WebHandler Language = " C# "  Class = " Start "   %>

using  System;
using  System.Web;
using  System.Data;
using  System.Web.Caching;
using  System.Threading;
public   class  Start : IHttpHandler
{

     public   void  ProcessRequest(HttpContext context)
    {
        context.Response.ContentType  =   " text/plain " ;
         if  (context.Request.QueryString[ " rid " ]  !=   null )
        {
             // 获得Default.aspx 页面传过来的唯一KEY
             string  rid  =  context.Request.QueryString[ " rid " ].ToString();
             object  threadLock  =  HttpContext.Current.Cache[rid];
             if  (threadLock  ==   null )
            {
                threadLock  =   new   object ();
                HttpContext.Current.Cache[rid]  =  threadLock;
            }
            
             if  ( ! Monitor.TryEnter(threadLock, 0 ))
                 return ;
             // 这里为了演示 用for  实际情况换成自己的逻辑代码  比如 文件上传
             for  ( int  i  =   1 ; i  <=   100 ; i ++ )
            {
                HttpContext.Current.Cache[rid]  =  CreateJson(i.ToString(),  " 100 " ); // 这里的100要灵活设置； 为了演示 我这里就设置了100
                Thread.Sleep( 100 );
            }
            Monitor.Exit(threadLock);
        }

    }
     ///   <summary>
     ///  生成JSON 格式数据
     ///   </summary>
     ///   <param name="CurrentNum"> 当前值 </param>
     ///   <param name="MaxNum"> 最大值 </param>
     ///   <returns></returns>
     public   string  CreateJson( string  CurrentNum,  string  MaxNum)
    {
         return   " {\"CurrentNum\":\" "   +  CurrentNum  +   " \",\"MaxNum\":\" "   +  MaxNum  +   " \"} " ;
    }
     public   bool  IsReusable
    {
         get
        {
             return   false ;
        }
    }

}

 

Progress.ashx

 

<% @ WebHandler Language = " C# "  Class = " Progress "   %>

using  System;
using  System.Web;
using  System.Data;
public   class  Progress : IHttpHandler {
    
     public   void  ProcessRequest (HttpContext context) {
        context.Response.ContentType  =   " text/plain " ;
         // 同步cache的唯一KEY  赋值和获取 的KEY 要同步  要一样
         string  rid  =  context.Request.QueryString[ " rid " ].ToString();
         // 输出到页面 便于ajax的接受JSON数据
         // 获得Cache的实时值
         string  jsonStr  =  HttpContext.Current.Cache[rid].ToString();
        context.Response.Write(jsonStr);
      
    }
   
     public   bool  IsReusable {
         get  {
             return   false ;
        }
    }

}

 

CacheRemove.ashx

 

 

<% @ WebHandler Language = " C# "  Class = " CacheRemove "   %>

using  System;
using  System.Web;

public   class  CacheRemove : IHttpHandler {
    
     public   void  ProcessRequest (HttpContext context) {
        context.Response.ContentType  =   " text/plain " ;
         string  rid  =  context.Request.QueryString[ " rid " ].ToString();
         // 清空缓存
        HttpContext.Current.Cache.Remove(rid);
    }
 
     public   bool  IsReusable {
         get  {
             return   false ;
        }
    }

}

转载于:https://www.cnblogs.com/wlly216/archive/2011/09/29/2195790.html