ASP.NET添加进度条

ASP.NET中,在上传文件或文件夹的时候可能时间较长,这就需要我们添加一个进度条。

设计界面如图1所示。

图1  ASP.NET上传文件或文件夹界面

进度条实现的代码如下:

 1                 Response.Write("<div id='mydiv' >");
 2                 Response.Write("_");
 3                 Response.Write("</div>");
 4                 Response.Write("<script>mydiv.innerText = '';</script>");
 5                 Response.Write("<script language=javascript>;");
 6                 Response.Write("var dots = 0;var dotmax = 10;function ShowWait()");
 7                 Response.Write("{var output; output = '正在压缩并上传文件';dots++;if(dots>=dotmax)dots=1;");
 8                 Response.Write("for(var x = 0;x < dots;x++){output += '·';}mydiv.innerText =  output;}");
 9                 Response.Write("function StartShowWait(){mydiv.style.visibility = 'visible'; ");
10                 Response.Write("window.setInterval('ShowWait()',1000);}");
11                 Response.Write("function HideWait(){mydiv.style.visibility = 'hidden';");
12                 Response.Write("window.clearInterval();}");
13                 Response.Write("StartShowWait();</script>");
14                 Response.Flush();
15                 Thread.Sleep(1000);
16 
17                 Response.Write("<script>HideWait()</script>");                

其中,最后一句Response.Write("<script>HideWait()</script>");为结束进度条的操作,即隐藏。使用时可将进程添加在此句代码之上,当进程执行完以后便结束进度条。

实现效果如图2所示:

图2 添加进度条后实现效果图

 

具体示例:

还是如图1所示的ASP.NET的设计界面,上传文件夹,要求:将文件夹压缩并上传。

单击上传文件夹按钮时,开始出现进度条,当文件夹压缩并且上传成功后,进度条结束。

在TextBox中手动输入将要上传的文件夹路径及文件夹名称,单击“上传文件夹”按钮,代码如下:

 1         /// <summary>
 2         /// 上传文件夹
 3         /// </summary>
 4         /// <param name="sender"></param>
 5         /// <param name="e"></param>
 6         protected void Button1_Click(object sender, EventArgs e)
 7         {
 8             if (TextBox1.Text == "") //如果输入为空,则弹出提示
 9             {
10                 this.Response.Write("<script>alert('输入为空,请重新输入!')</script>");
11             }
12             else
13             {
14                 //压缩文件夹
15                 string zipPath = TextBox1.Text.Trim(); //获取将要压缩的路径(包括文件夹名)
16                 string zipedPath = @"c:\temp"; //压缩文件夹的路径(包括压缩文件名)
17                 Zip Zc = new Zip();
18                 //加载进度条
19                 Response.Write("<div id='mydiv' >");
20                 Response.Write("_");
21                 Response.Write("</div>");
22                 Response.Write("<script>mydiv.innerText = '';</script>");
23                 Response.Write("<script language=javascript>;");
24                 Response.Write("var dots = 0;var dotmax = 10;function ShowWait()");
25                 Response.Write("{var output; output = '正在压缩并上传文件';dots++;if(dots>=dotmax)dots=1;");
26                 Response.Write("for(var x = 0;x < dots;x++){output += '·';}mydiv.innerText =  output;}");
27                 Response.Write("function StartShowWait(){mydiv.style.visibility = 'visible'; ");
28                 Response.Write("window.setInterval('ShowWait()',1000);}");
29                 Response.Write("function HideWait(){mydiv.style.visibility = 'hidden';");
30                 Response.Write("window.clearInterval();}");
31                 Response.Write("StartShowWait();</script>");
32                 Response.Flush();
33                 Thread.Sleep(1000);
34                 //压缩文件夹并上传
35                 //调用Zip类中的ZipDir方法,压缩文件夹并上传,
36                 //zipPath为原文件夹路径及文件夹名,zipedPath为压缩后上传的压缩文件路径及文件夹名,6为压缩等级
37                 //具体参见上一篇博客或访问http://www.cnblogs.com/zhzhx/archive/2013/04/14/3021077.html
38                 Zc.ZipDir(zipPath, zipedPath, 6);
39                 //结束进度条
40                 Response.Write("<script>HideWait()</script>");
41                 //显示压缩文件夹信息
42                 this.Label1.Text = "<Br/>";
43                 this.Label1.Text += "文件压缩并且上传成功!";
44                 this.Label1.Text += "<Br/>";
45                 this.Label1.Text += "<li>" + "原文件路径:" + zipPath;
46                 this.Label1.Text += "<Br/>";
47                 this.Label1.Text += "<li>" + "压缩上传后文件路径:" + zipedPath;
48             }
49         }


补充:Label标签为添加到TextBox下的控件,用于显示文件夹的信息。

posted @ 2013-04-21 20:27  zhzhx0318  阅读(581)  评论(0编辑  收藏  举报