1、先引入jquery和jquery-ui的js,例子如下：
<link href="JqueryUI/jquery-ui.css" rel="stylesheet" />
<script src="Scripts/jquery-1.8.2.js"></script>
<script src="JqueryUI/jquery-ui.js"></script>
可以使用div來作為顯示進度條的載體：
<div id="divProgressbar"></div>
將上面的div變成進度條：
<script type="text/javascript">
$(function(){
$("#divProgressbar").progressbar({value: 30}); //初始話進度條並設置初始值為30
alert("當前值是: " + $("#divProgressbar").progressbar("option","value")); //讀取進度條的當前值
});
</script>
一運行例子就明白
三、 要進度條動起來怎么辦？
做個小實驗，修改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>
嘿嘿——進度條動起來了，而且彈出框的值也變化了。
四、 可以實用的進度條
修改代碼如下：
<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);
五、 在適當的地方終止這個傻頭傻腦的程序
其實我們只需要在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>