注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

ASP.NET 进度条  

2011-08-25 18:04:41|  分类: asp.net |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

自己做的 ASP.NET 进度条的演示

工程项目下载 (开发环境VS2008 .net 2.0)

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;
}
}

}
  评论这张
 
阅读(873)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017