JS实现上传进度条

简介: 文件上传的时候经常需要等待,这个时候可以考虑增加进度条来实现这个技术,下面主要是使用js模拟进度条,记住这是模拟进度条,不是真实的进度条,因为如果是真实的进度条需要实现获取文件的真实大小,以及监听每时每刻文件上传的大小,获得这些数据后,还需要使用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> 


目录
相关文章
|
3月前
|
移动开发 JavaScript 前端开发
分享36个JS滚动,29个JS进度条,12个JS日历代码,总有一款适合您
分享36个JS滚动,29个JS进度条,12个JS日历代码,总有一款适合您
26 0
|
3月前
|
移动开发 JavaScript 前端开发
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您
24 0
|
7月前
|
JavaScript
js进度条载入demo效果示例(整理)
js进度条载入demo效果示例(整理)
|
7月前
|
JavaScript
进入页面js加载进度条demo效果示例(整理)
进入页面js加载进度条demo效果示例(整理)
进入页面js加载进度条demo效果示例(整理)
|
9月前
|
JavaScript 前端开发
javascript实现数据自动模拟系列(1):ProgressBarWars.js进度条动画轮播
javascript实现数据自动模拟系列(1):ProgressBarWars.js进度条动画轮播
51 0
|
JavaScript
js:监听页面滚动scroll,实现阅读进度条
js:监听页面滚动scroll,实现阅读进度条
318 0
|
JavaScript 前端开发
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码: &lt;!-- &lt;input type=&quot;text&quot; id=&quot;text&quot;&gt; --&gt; 请选择省份: &lt;select name=&quot;&quot; id=&quot;provinces&quot;&gt; &lt;!-- &lt;option value=&quot;江苏省&quot;&gt;江苏省&lt;/option&gt;
|
JavaScript 前端开发
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
167 0
|
移动开发 JavaScript weex
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
219 0