jQuery + JavaScript 实现的动态添加文本框功能 1.0版本 ,这个功能在一次上传多个文件时,经常会用到,这篇文章主要实现动态添加文件上传控件的功能。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>jQuery 实现的动态添加文本框功能 1.0版本 </title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" href="CSS/myapplications.css" type="text/css" />
<!-- jQuery官方CDN,直接加上这2行代码,就可以使用了 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
//点击按钮,动态添加文件上传控件
function produceInputElement(){
//定义一个变量,表示当前input文本框的id值的前缀
var id_prefix = "fileToUpload_";
//获取隐藏标签,从隐藏标签中获取id,达到动态获取id的目的
var hidden_input = document.getElementById("hidden_input");
//定义一个变量,表示当前input文本框的id值的后缀
var id_suffix = hidden_input.value;
//当前input文本框的id值
var id_current = id_prefix + id_suffix;
//生成新标签
$('<tr><td><input type="file" id="' + id_current + '" /></td></tr>').appendTo($("#file_input_1"));
//为新添加的按钮,设置CSS样式
var current_input = document.getElementById(id_current);
//CSS样式设置
current_input.style = "width:100%;height:100%;color:yellow;padding:6px 2px;font-size: 14px;line-height: 1.428571429;color: red;vertical-align: middle;background-
color:#eeeeee;border:2px solid #404040;border-radius:2px;";
//定义一个变量,用来表示需要保存到隐藏标签中的值
var new_input = new String(parseInt(hidden_input.value) + 1);
//更新隐藏标签的值
hidden_input.value = new_input;
}
</script>
</head>
<body>
<!-- 隐藏标签,用来保存新生成的input 文件上传控件的 id 值的后缀 初始值为1 -->
<input type="hidden" id="hidden_input" value="1">
<!-- Ajax Asynchronous request test -->
<div id="container">
<table class="zebra">
<thead>
<tr>
<th>jQuery 实现的动态添加文本框功能</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="file" id="fileToUpload_0" /></td>
</tr>
</tbody>
</table>
</div>
<div id="container">
<table class="zebra">
<tbody id="file_input_1">
</tbody>
</table>
</div>
<div id="container">
<table class="zebra">
<tr>
<td><input type="button" id="uploadManyFile_button" value="继续添加文件" οnclick="produceInputElement()"/></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
CSS文件:myapplications.css ,CSS文件中的部分CSS样式没有用到,仅供参考,测试环境firefox
@charset "UTF-8";
html, body{
padding:0;
margin:0;
position:relative;
background:url(../images/body.jpg);
background-repeat:repeat;
color:#fff;
letter-spacing:1px;
font-family:Georgia, "Times New Roman", Times, serif;
}
.zebra caption{
font-size:20px;
font-weight:normal;
background:url(../images/zebratable.png);
background-repeat:no-repeat;
background-position: 130px center;
padding-top: 20px;
height:50px;}
#container{
padding-top:20px;
width:960px;
margin:0 auto;
}
table {
border-collapse: collapse;
border-spacing: 0;
width:100%;
-webkit-box-shadow: 0px 2px 1px 5px rgba(242, 242, 242, 0.1);
box-shadow: 0px 2px 1px 5px rgba(242, 242, 242, 0.1);
}
.zebra {
border: 1px solid #555;
}
.zebra td {
border-left: 1px solid #555;
border-top: 1px solid #555;
padding: 10px;
text-align: left;
}
.zebra th, .zebra th:hover {
border-left: 1px solid #555;
border-bottom: 1px solid #828282;
padding: 20px;
background-color:#151515 !important;
background-image: -webkit-gradient(linear, left top, left bottom, from(#151515), to(#404040)) !important;
background-image: -webkit-linear-gradient(top, #151515, #404040) !important;
background-image: -moz-linear-gradient(top, #151515, #404040) !important;
background-image: -ms-linear-gradient(top, #151515, #404040) !important;
background-image: -o-linear-gradient(top, #151515, #404040) !important;
background-image: linear-gradient(top, #151515, #404040) !important;
color:#fff !important;
font-weight:normal;
}
.zebra tbody tr:nth-child(even) {
background: #000 !important;
color:#fff;
}
.zebra tr:hover *{
background: #eeeeee;
color:#000;
}
.zebra tr {
background:#404040;
color:#fff;
}
#input_url{
width:100%;
height:100%;
padding: 12px 12px;
font-size: 15px;
line-height: 1.428571429;
color: #000000;
vertical-align: middle;
background-color: #ffffff;
border: 2px solid gray;
border-radius: 4px;
}
#submit_url_one,#submit_url_all,#response_text_1,#response_text_2,#fileToUpload_0,#uploadManyFile_button{
width:100%;
height:100%;
padding: 6px 2px;
font-size: 14px;
line-height: 1.428571429;
color: red;
vertical-align: middle;
background-color: #eeeeee;
border: 2px solid #404040;
border-radius: 2px;
}
#submit_url_one:hover{
background: #404040;
border: 2px solid #000000;
}
如果用户选择的图片想删除掉,也就是不想上传这张图片了,我们应该能够删除指定的文本框。实际批量上传文件的项目中,我们还需要完善删除文本框的功能。稍后会继续更新完善功能。