JQuery UI进度条——Progressbar

2020-06-29
9

一、先引入jquery和jquery-ui的js,例子以下:javascript

<link href="JqueryUI/jquery-ui.css" rel="stylesheet" />
<script src="Scripts/jquery-1.8.2.js"></script>
<script src="JqueryUI/jquery-ui.js"></script>css

可使用div来做为显示进度条的载体:html

        <div id="divProgressbar"></div>java

      将上面的div变成进度条:jquery

        <script type="text/javascript">ajax

            $(function(){bootstrap

                $("#divProgressbar").progressbar({value: 30});  //初始话进度条并设置初始值为30app

                alert("当前值是: " + $("#divProgressbar").progressbar("option","value"));  //读取进度条的当前值异步

            });async

        </script>

      一运行例子就明白

 

3、          要进度条动起来怎么办?

作个小实验,修改jquery代码以下:

        <script type="text/javascript">

            $(function(){

                $("#divProgressbar").progressbar({value: 30});

                alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));

                $("#divProgressbar").progressbar({value: 60});

                alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));

                $("#divProgressbar").progressbar({value: 90});

                alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));

            });

        </script>

      运行,看是什么结果,进度条没变化,每次弹出框的值都是30吧!为何捏?由于.progressbar({value: 30})是用来初始化的上面已经在代码的注释里提到,在dialog那篇里也说到同一个控件是不容许被屡次初始化的,因此咱们必须用其它的方法来修改进度条的当前值,jQuery提供了.progressbar("option", "value", 60)方法来设置当前值,这里还能够发现,不在后面加数值参数的话就是读取当前值。

    再修改代码以下:

        <script type="text/javascript">

            $(function(){

                $("#divProgressbar").progressbar({value: 30});

                alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));

                $("#divProgressbar").progressbar("option", "value", 60);

                alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));

                $("#divProgressbar").progressbar("option", "value", 90);

                alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));

            });

        </script>

      嘿嘿——进度条动起来了,并且弹出框的值也变化了。

 

4、          能够实用的进度条

修改代码以下:

        <script type="text/javascript">

            $(function(){

                updateProgressbarValue();   //调用函数

               

                function updateProgressbarValue(){

                    $("#divProgressbar").progressbar({value: 0});   //初始化进度条,若是已经初始化则会跳过

                    var newValue = $("#divProgressbar").progressbar("option", "value") + 3; //读取进度条现有值并计算出新值

                    $("#divProgressbar").progressbar("option", "value", newValue);  //设置进度条新值

                    setTimeout(updateProgressbarValue, 500);    //使用setTimeout函数延迟调用updateProgressbarValue函数,延迟时间为500毫秒

                }

            });

        </script>

      这里最重要的是使用了setTimeout来延迟调用函数,而且这是一个自嵌套函数,若是没有终止它的话它将一直运行下去,这是不被容许的。

      在setTimeout(updateProgressbarValue, 500);前加入下面的代码就知道了:

        alert(newValue);

 

5、          在适当的地方终止这个傻头傻脑的程序

其实咱们只须要在setTimeout(updateProgressbarValue, 500);前加一个判断就ok了:

    if(newValue <= 100)setTimeout(updateProgressbarValue, 10);

这样咱们就能够在进度条满了后终止这个傻瓜继续执行。

最终代码以下:

        <script type="text/javascript">

            $(function(){

                updateProgressbarValue();

                function updateProgressbarValue(){

                    $("#divProgressbar").progressbar({value: 0});

                    var newValue = $("#divProgressbar").progressbar("option", "value") + 10;

                    $("#divProgressbar").progressbar("option", "value", newValue);

                    alert(newValue);

                    if(newValue <= 100) setTimeout(updateProgressbarValue, 10);

                }

            });

        </script>

大文件上传带进度条的代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadTest2.aspx.cs" Inherits="Html5UploadTest.UploadTest2" %>

<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>HTML5大文件分片上传示例</title>
    <script src="Scripts/jquery-1.8.2.js"></script>
    <link href="bootstrap-progressbar/bootstrap-progressbar-3.3.4.css" rel="stylesheet" />
    <script src="bootstrap-progressbar/bootstrap-progressbar.js"></script>

    <%--<link href="JqueryUI/jquery-ui.css" rel="stylesheet" />
    <script src="JqueryUI/jquery-ui.js"></script>--%>
    <script>
        function uploadFile() {
            $("#upload").attr("disabled", "disabled");
            var file = $("#file")[0].files[0],  //文件对象
                fileNum = $("#file")[0].files[0].length,
                name = file.name,        //文件名
                size = file.size,        //总大小
                succeed = 0;
            var shardSize = 2 * 1024 * 1024,    //以2MB为一个分片
                shardCount = Math.ceil(size / shardSize);  //总片数
            $('.progress .progress-bar').attr('data-transitiongoal', 0).progressbar({ display_text: 'fill' });
            for (var i = 0; i < shardCount; ++i) {
                //计算每一片的起始与结束位置
                var start = i * shardSize,
                    end = Math.min(size, start + shardSize);
                //构造一个表单,FormData是HTML5新增的
                var form = new FormData();
                form.append("data", file.slice(start, end));  //slice方法用于切出文件的一部分
                form.append("name", name);
                form.append("total", shardCount);  //总片数
                form.append("index", i + 1);        //当前是第几片
                //Ajax提交
                $.ajax({
                    url: "Upload.ashx",
                    type: "POST",
                    data: form,
                    async: true,        //异步
                    processData: false,  //很重要,告诉jquery不要对form进行处理
                    contentType: false,  //很重要,指定为false才能造成正确的Content-Type
                    success: function () {
                        ++succeed;
                        $("#output").text(succeed + " / " + shardCount);
                        var percent = ((succeed / shardCount).toFixed(2)) * 100;
                        updateProgress(percent);
                        if (succeed == shardCount) {
                            $("#upload").removeAttr("disabled");
                        }
                    }
                });
            }
        }
        function progress(percent, $element) {
            var progressBarWidth = percent * $element.width() / 100;
            $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");
        }
        
        //$(document).ready(function () {
        //    $('.progress .progress-bar').progressbar({ display_text: 'fill' });
        //});
        function updateProgress(percentage) {
            $('.progress .progress-bar').attr('data-transitiongoal', percentage).progressbar({ display_text: 'fill' });
        }
    </script>
</head>
<body>

    <input type="file" id="file" />

    <button id="upload" onclick="uploadFile();">上传</button>

    <span id="output" style="font-size: 12px">等待</span>
    <div class="progress">
        <div id="progressBar" class="progress-bar" role="progressbar" data-transitiongoal=""></div>
    </div>
</body>

</html>
View Code

评论