4、上传进度条
文件通过Ajax上传,可获得文件上传进度值,上传进度条可以通过两种方式实现。
一种是通过样式改变形状来展现,一种是通过html5的progress控件,直接赋值。
进度条改变范例:
<body>
<input id="Text1" type="text" value="10" /><input id="Button1" type="button" οnclick="set_progress_value()" value="设置" />
<div><progress id="my_progress" class="progress" value="0" max="100"></progress> </div>
<div id="box"><div id="bar"> </div></div>
<script>
function set_progress_value() {
var progress = document.getElementById("my_progress");
var bar = document.getElementById("bar");
progress.value = parseInt(document.getElementById("Text1").value);
bar.style.width = parseInt(document.getElementById("Text1").value) + "px";
};
</script>
<style type="text/css">
#box {
left: 10px;
float: left;
width: 200px;
height: 10px;
border: 1px solid grey;
position: absolute;
top: 60px;
}
#bar {
width: 0px;
height: 10px;
border: 0px;
background: #5fa187;
}
.progress{
width: 200px;
height: 10px;
}
</style>
</body>