zoukankan      html  css  js  c++  java
  • Asp.net添加上传进度条

    using System;
    using System.Data;
    using System.Configuration;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using System.Threading;
    using System.IO;

    public partial class _Default : System.Web.UI.Page
    {
        private void beginProgress()
        {
            //根据ProgressBar.htm显示进度条界面
            string templateFileName = Path.Combine(Server.MapPath("."), "ProgressBar.htm");
            StreamReader reader = new StreamReader(@templateFileName, System.Text.Encoding.GetEncoding("GB2312"));
            string html = reader.ReadToEnd();
            reader.Close();
            Response.Write(html);
            Response.Flush();
        }

        private void setProgress(int percent)
        {
            string jsBlock = "<script>SetPorgressBar('" + percent.ToString() + "'); </script>";
            Response.Write(jsBlock);
            Response.Flush();
        }

        private void finishProgress()
        {
            string jsBlock = "<script>SetCompleted();</script>";
            Response.Write(jsBlock);
            Response.Flush();
        }

        private void Page_Load(object sender, System.EventArgs e)
        {
            beginProgress();

            for (int i = 1; i <= 100; i++)
            {
                setProgress(i);

                //此处用线程休眠代替实际的操作,如加载数据等
                System.Threading.Thread.Sleep(50);
            }

            finishProgress();
        }
    }

    htm代码:

    <!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" id="mainWindow">
    <head>
        <title>无标题页</title>
        <script type="text/javascript">
            function SetPorgressBar(pos)
            {
                //设置进度条居中
                var screenHeight = window["mainWindow"].offsetHeight;
                var screenWidth = window["mainWindow"].offsetWidth;
                ProgressBarSide.style.width = Math.round(screenWidth / 2);
                ProgressBarSide.style.left = Math.round(screenWidth / 4);
                ProgressBarSide.style.top = Math.round(screenHeight / 2);
                ProgressBarSide.style.height = "21px";
                ProgressBarSide.style.display = "";
                
                //设置进度条百分比                      
                ProgressBar.style.width = pos + "%";
                ProgressText.innerHTML = pos + "%";
            }

            //完成后隐藏进度条
            function SetCompleted()
            {      
                ProgressBarSide.style.display = "none";
            }
         </script> 
    </head>
        <body>
        <div id="ProgressBarSide" style="position:absolute;height:21x;100px;color:Silver;border-1px;border-style:Solid;display:none">
            <div id="ProgressBar" style="position:absolute;height:21px;0%;background-color:#3366FF"></div>
            <div id="ProgressText" style="position:absolute;height:21px;100%;text-align:center"></div>
        </div>
        </body>
    </html>


     

  • 相关阅读:
    [Javascript] 面向对象编程思想
    [Javascript] “||”和“&&”的灵活运用
    [Java] HashMap、TreeMap、Hashtable排序
    [Java] 多个Map的性能比较(TreeMap、HashMap、ConcurrentSkipListMap)
    [Java] 集合类(List、Set、Map的基本使用)
    [Java] Map 集合类简介
    [Javascript,JSON] JQuery处理json与ajax返回JSON实例
    [PHP] Eclipse开发PHP环境配置
    nginx的 CPU参数worker_processes和worker_cpu_affinity使用说明
    【HTTP 2】启用 HTTP 2(Starting HTTP/2)
  • 原文地址:https://www.cnblogs.com/wangyhua/p/4050664.html
Copyright © 2011-2022 走看看