JQuery UI進度條——Progressbar

時間 2020-06-29 標籤 jquery ui 進度條 progressbar

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

可使用div來做爲顯示進度條的載體：html

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

將上面的div變成進度條：jquery

$(function(){bootstrap

$("#divProgressbar").progressbar({value: 30}); //初始話進度條並設置初始值爲30app

alert("當前值是: " + $("#divProgressbar").progressbar("option","value")); //讀取進度條的當前值異步

});async

</script>

一運行例子就明白

3、要進度條動起來怎麼辦？

作個小實驗，修改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>

嘿嘿——進度條動起來了，並且彈出框的值也變化了。

4、能夠實用的進度條

修改代碼以下：

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

這樣咱們就能夠在進度條滿了後終止這個傻瓜繼續執行。

最終代碼以下：

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