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> 



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM