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