javascript 进度条

最新推荐文章于 2024-01-11 08:54:16 发布

原创最新推荐文章于 2024-01-11 08:54:16 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ViewUI

本文介绍了一个使用 JavaScript 实现的动态进度条及文件上传功能。通过定时器逐步更新进度显示，并在上传完成后跳转到指定页面。此外，还包含了一个文件选择上传的 HTML 表单。

1.js


function daoJiShi() {
		document.getElementById('thebar').innerHTML = '<div class="progressbar_3" id="thebar1">'+'<div class="text">'+hhhh+'%</div>'
				+'<div class="bar" style="width:'+hhhh+'%;"></div>'+'</div>'+'<br/><div>  制品正在上传...</div>';
		hhhh = hhhh + 1;
		if(hhhh>100){
			window.location.href='${path}/check/analyMusic.jsp';
		}
		setTimeout('daoJiShi()', 100);

	}

2.html

<div class=".wrap" align="center" id="thebar">

								<DIV class=putin_con>
									<P align="center">
										上传制品：
										<input type="file" name="image" id="file1" size="50"
											style="HEIGHT: 20px">
									</P>
									<br>
									<br>
									<P align="center">
										<INPUT id=Button class=input2 name=Button value=提交
											type="button" onclick=LimitAttach();>
										<INPUT id=Button class=input2 name=Button value=取消
											type="reset">
									</P>

									<DIV style="DISPLAY: none; COLOR: red" id=VS></DIV>

								</DIV>
							</div>