JS实现上传进度条

来源：互联网发布：字体大小软件下载编辑：程序博客网时间：2024/05/21 11:35

刚好做一个项目要用进度条，找了很久也没找到，真是惨，突然想起，JS不是有吗，一搜就出来了，真郁闷！一下是我在网上搜出来的！希望对大家有帮助！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style type="text/css"> .spa{ font-size:12px; color:#0066ff; } .put{ font-size:12px; font-family:Arial; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none; } .put2{ font-size:12px; color:#0066ff; text-align:center; border-width:medium; border-style:none; } </style> </HEAD> <BODY> <div id="up"> <span class="spa">载入中,请稍等...</span> <input id="chart" type="text" size="54" class="put" readOnly /> <input id="percent" type="text" size="20" class="put2" readOnly /> </div> <div id="ff"> <form name="upload" method="post" action=""> <input type="file" id="f" size="30" /> <input type="button" id="b" value="上传" onclick="count()"/> </form> </div> <script language="javascript"> var bar=0; var line="||"; var amount=""; document.getElementById("up").style.display="none"; function count(){ var f = document.getElementById("f"); var b = document.getElementById("b"); b.disabled = true; f.disabled = true; if(f.value==""){ b.disabled = false; f.disabled = false; alert("请添加上传文件"); return false; } document.getElementById("up").style.display="inline"; bar = bar+2; amount = amount+line; document.getElementById("chart").value=amount; document.getElementById("percent").value=bar+"%"; if(bar<99){ setTimeout("count()",200); }else{ b.disabled = false; f.disabled = false; alert("加载完毕！"); document.getElementById("up").style.display="none"; // window.location=""; } } </script> </BODY> </HTML>