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