文件上傳的時候經常需要等待,這個時候可以考慮增加進度條來實現這個技術,下面主要是使用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>
