javascript简单文件上传

于 2014-03-26 02:53:15 发布
阅读量519 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/openblogs/article/details/22129565
版权

javascript 简单文件上传

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>文件上传</title>
  </head>
  <body>
    <!-- 这是RFC1867协议规则的浏览器上传文件的方式 -->
  	<form action="${pageContext.request.contextPath}/UploadServlet" method="post" enctype="multipart/form-data">
  		<table border="2" align="center" style="width:888px">
  			<tr>
  				<th>上传人</th>
  				<td><input type="text" name="username" maxlength="4"/></td>
  			</tr>
  			<tr>
  				<th></th>
  				<td>
  					<div id="outDIV">
  						<!-- 
  						<div><input type="file" name="photo"/><input type="button" value="删除"/></div>
  						 -->
  					</div>
  				</td>
  			</tr>	
  			<tr>
  				<th></th>
  				<td><input type="button" value="添加上传文件" οnclick="addLine(this)"/></td>
  			</tr>
  			<tr>
  				<td colspan="2" align="center">
  					<input type="submit" value="上传"/>
  				</td>
  			</tr>  		
  		</table>
  	</form>
  </body>
  <script type="text/javascript">
  	
  	var i = 0;
  
  	function addLine(buttonElement){
  		
  		var divElement = document.createElement("div");
  		
  		var fileInputElement = document.createElement("input");
  		fileInputElement.type = "file";
  		fileInputElement.name = "photo";
  		
  		var delInputElement = document.createElement("input");
  		delInputElement.type = "button";
  		delInputElement.value = "删除";
  		delInputElement.onclick = function(){
			document.getElementById("outDIV").removeChild(divElement);
			i--;
			if(i < 5){
				buttonElement.disabled = false;
			}
  		}
  		
  		divElement.appendChild(fileInputElement);
  		divElement.appendChild(delInputElement);
  		
  		document.getElementById("outDIV").appendChild(divElement);
  		
  		i++;
  		
  		if(i == 5){
  			
  			buttonElement.disabled = true;
  		}
  		
  	}
  </script>
</html>

openBlog
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值