JS实现上传进度条

最新推荐文章于 2024-07-22 15:51:01 发布

iteye_3952

最新推荐文章于 2024-07-22 15:51:01 发布

阅读量225

点赞数

文章标签： java php 前端 ViewUI

文件上传的时候经常需要等待，这个时候可以考虑增加进度条来实现这个技术，下面主要是使用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="上传" οnclick="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>