【web】js添加附件功能（显示进度条）——添加附件-demo01

最新推荐文章于 2024-05-08 11:28:24 发布

michael_ouyang

最新推荐文章于 2024-05-08 11:28:24 发布

阅读量5.2k

点赞数 1

文章标签： javascript web html

本文链接：https://blog.csdn.net/michael_ouyang/article/details/52597544

版权

使用input元素添加附件（显示进度条）

备注：此项目没有实现上传附件的功能

项目成品图：

运行的状态：

点击上传的状态：

以下是项目源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head> 
		<title> New Document </title> 
		<meta charset="utf-8">
		<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>

分析：

第24行：是选择附件的核心

<input type="file" id="f" size="30" />

进度条部分：

25行：

<input type="button" id="b" value="上传" οnclick="count()" />

28-59行：

<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>

点此获取源码