ASP.NET添加进度条

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

设计界面如图1所示。

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

进度条实现的代码如下：

                Response.Write("<div id='mydiv' >");
                Response.Write("_");
                Response.Write("</div>");
                Response.Write("<script>mydiv.innerText = '';</script>");
                Response.Write("<script language=javascript>;");
                Response.Write("var dots = 0;var dotmax = 10;function ShowWait()");
                Response.Write("{var output; output = '正在压缩并上传文件';dots++;if(dots>=dotmax)dots=1;");
                Response.Write("for(var x = 0;x < dots;x++){output += '·';}mydiv.innerText =  output;}");
                Response.Write("function StartShowWait(){mydiv.style.visibility = 'visible'; ");
                Response.Write("window.setInterval('ShowWait()',1000);}");
                Response.Write("function HideWait(){mydiv.style.visibility = 'hidden';");
                Response.Write("window.clearInterval();}");
                Response.Write("StartShowWait();</script>");
                Response.Flush();
                Thread.Sleep(1000);

                Response.Write("<script>HideWait()</script>");                

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

实现效果如图2所示：

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

 

具体示例：

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

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

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

        /// <summary>
        /// 上传文件夹
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Button1_Click(object sender, EventArgs e)
        {
            if (TextBox1.Text == "") //如果输入为空,则弹出提示
            {
                this.Response.Write("<script>alert('输入为空，请重新输入！')</script>");
            }
            else
            {
                //压缩文件夹
                string zipPath = TextBox1.Text.Trim(); //获取将要压缩的路径(包括文件夹名)
                string zipedPath = @"c:\temp"; //压缩文件夹的路径(包括压缩文件名)
                Zip Zc = new Zip();
                //加载进度条
                Response.Write("<div id='mydiv' >");
                Response.Write("_");
                Response.Write("</div>");
                Response.Write("<script>mydiv.innerText = '';</script>");
                Response.Write("<script language=javascript>;");
                Response.Write("var dots = 0;var dotmax = 10;function ShowWait()");
                Response.Write("{var output; output = '正在压缩并上传文件';dots++;if(dots>=dotmax)dots=1;");
                Response.Write("for(var x = 0;x < dots;x++){output += '·';}mydiv.innerText =  output;}");
                Response.Write("function StartShowWait(){mydiv.style.visibility = 'visible'; ");
                Response.Write("window.setInterval('ShowWait()',1000);}");
                Response.Write("function HideWait(){mydiv.style.visibility = 'hidden';");
                Response.Write("window.clearInterval();}");
                Response.Write("StartShowWait();</script>");
                Response.Flush();
                Thread.Sleep(1000);
                //压缩文件夹并上传
                //调用Zip类中的ZipDir方法，压缩文件夹并上传，
                //zipPath为原文件夹路径及文件夹名，zipedPath为压缩后上传的压缩文件路径及文件夹名，6为压缩等级
                //具体参见上一篇博客或访问http://www.cnblogs.com/zhzhx/archive/2013/04/14/3021077.html
                Zc.ZipDir(zipPath, zipedPath, 6);
                //结束进度条
                Response.Write("<script>HideWait()</script>");
                //显示压缩文件夹信息
                this.Label1.Text = "<Br/>";
                this.Label1.Text += "文件压缩并且上传成功！";
                this.Label1.Text += "<Br/>";
                this.Label1.Text += "<li>" + "原文件路径：" + zipPath;
                this.Label1.Text += "<Br/>";
                this.Label1.Text += "<li>" + "压缩上传后文件路径：" + zipedPath;
            }
        }

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