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下的控件,用于显示文件夹的信息。