JQuery UI进度条——Progressbar

1、先引入jquery和jquery-ui的js,例子如下：

可以使用div来作为显示进度条的载体：

将上面的div变成进度条：

$(function(){

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

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

});

</script>

一运行例子就明白

三、要进度条动起来怎么办？

做个小实验，修改jquery代码如下：

$(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)方法来设置当前值，这里还可以发现，不在后面加数值参数的话就是读取当前值。

再修改代码如下：

$(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>

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

四、可以实用的进度条

修改代码如下：

$(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);

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

其实我们只需要在setTimeout(updateProgressbarValue, 500);前加一个判断就ok了：

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

这样我们就可以在进度条满了后终止这个傻瓜继续执行。

最终代码如下：

$(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")[].files[],  //文件对象

                fileNum = $("#file")[].files[].length,

                name = file.name,        //文件名

                size = file.size,        //总大小

                succeed = ;

            var shardSize =  *  * ,    //以2MB为一个分片

                shardCount = Math.ceil(size / shardSize);  //总片数

            $('.progress .progress-bar').attr('data-transitiongoal', ).progressbar({ display_text: 'fill' });

            for (var i = ; 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 + );        //当前是第几片

                //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()) * ;

                        updateProgress(percent);

                        if (succeed == shardCount) {

                            $("#upload").removeAttr("disabled");

                        }

                    }

                });

            }

        }

        function progress(percent, $element) {

            var progressBarWidth = percent * $element.width() / ;

            $element.find('div').animate({ width: progressBarWidth }, ).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>

秒客网

JQuery UI进度条——Progressbar

相关文章