JS实现上传进度条
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
JS实现上传进度条
⽂件上传的时候经常需要等待，这个时候可以考虑增加进度条来实现这个技术，下⾯主要是使⽤js模拟进度条，记住这是模拟进度条，不是真实的进度条，因为如果是真实的进度条需要实现获取⽂件的真实⼤⼩，以及监听每时每刻⽂件上传的⼤⼩，获得这些数据后，还需要使⽤js技术把数据传递到前端，貌似⽬前哥哥还实现不了这个技术，先使⽤js模拟⼀下吧，过⼏天在研究⼀下使⽤php真实的监听⽂件上传情况，先看⼀下模拟进度条（再次声明这只是模拟的，不是真实的）
<!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>。