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>
