用JS模拟实现下传文件加载进度条
日期：2014-05-16 浏览次数：20417 次
用JS模拟实现上传文件加载进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.spa{ font-size:12px; color:#0066ff;}
.put{ font-size:12px; font-family:Arial, Helvetica, sans-serif; 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="readonly" />
<input id="percent" type="text" size="20" class="put2" readonly="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>
<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=bar+"%";
if(bar<99){
setTimeout("count()",200);
}
else{
b.disabled=false;
f.disabled=false;
alert("加载完毕")
document.getElementById("up").style.display="none";
}
}
</script>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.spa{ font-size:12px; color:#0066ff;}
.put{ font-size:12px; font-family:Arial, Helvetica, sans-serif; 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="readonly" />
<input id="percent" type="text" size="20" class="put2" readonly="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>
<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=bar+"%";
if(bar<99){
setTimeout("count()",200);
}
else{
b.disabled=false;
f.disabled=false;
alert("加载完毕")
document.getElementById("up").style.display="none";
}
}
</script>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
