接着上一篇
jQuery + JavaScript 实现的动态添加文本框功能(一)
来说。首先看一下效果图:
1,jQuery实现的动态添加文本框和动态删除文本框的功能-1-操作前.jpg
2,jQuery实现的动态添加文本框和动态删除文本框的功能-2-添加3个文本框.jpg
3,jQuery实现的动态添加文本框和动态删除文本框的功能-3-删除文本框提示.jpg
4,jQuery实现的动态添加文本框和动态删除文本框的功能-4-删除文本框以后.jpg
在上一篇文章,动态添加文本框功能的基础上,这一次,增加了动态删除文本框的功能。可以删除指定的文本框,删除是通过id来实现的。
1,每一个新添加的文本框,都有一个唯一的id;
2,每一个新添加的文本框,都有一个取消上传的按钮,这个按钮的id也是唯一的;
3,id的唯一性,能够保证,我们所有动态添加的内容,都是可操作的。
好了,下面来看完整代码:
<%@ 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>SpringMVC 实现多文件上传</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" />
<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">
//发送ajax异步请求
function ajaxTest(){
//
var xmlHttp;
//如果浏览器支持XMLHttpRequest,则直接创建XMLHttpRequest对象
if(window.XMLHttpRequest){
//创建XMLHttpRequest对象
xmlHttp = new XMLHttpRequest();
}
//创建ActiveXObject对象
else{
//
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//发送XMLHttpRequest异步请求
xmlHttp.open("POST", "AjaxAsynchronousRequestTest.action", true);
//
xmlHttp.send();
//接收服务器端返回的数据
var responsetext = xmlHttp.responseText;
alert(message);
//获取文本框对象
var textArea = document.getElementById("input_url");
textArea.value = responsetext;
}
//使用jQuery + Ajax + SpringMVC
$(function(){
//文本框点击事件
$("#input_url").click(
function(){
//
var $a = $(this);
//发送ajax请求
$.ajax({
//
url:"AjaxAsynchronousRequestTest.action",
type:'post',
data:'name=admin',
dataType:'json',
success:function(data,status){
if(status == "success"){
//接收服务器端传来的数据
var str1_from_server = data.message;
var str2_from_server = data.msg;
//将接收到的数据显示到文本框
$("#response_text_1").val(str1_from_server);
$("#response_text_2").val(str2_from_server);
}
},
//
error:function(xhr,textStatus,errorThrown){}
}
);
}
);
}
);
//点击按钮,动态添加文件上传控件
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);
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;
}
//点击按钮,动态添加文件上传控件,并且能够动态删除文件上传控件
function produceAndDeleteInputElement(){
//定义一个变量,表示当前input文本框的id值的前缀
var id_prefix = "fileToUploadAndDelete_";
//获取隐藏标签,从隐藏标签中获取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;
//当前删除按钮的id
var id_current_delete = id_current + "_delete";
//当前td标签的父标签tr标签的id
var id_current_tr = id_current_delete + "_tr";
//生成新标签
$('<tr id="' + id_current_tr + '"><td><input type="file" id="' + id_current + '" /></td><td><input type="button" id="' + id_current_delete + '" value="取消上传" οnclick="deleteFile('+id_current_delete+')"></td></tr>').appendTo($("#file_input_delete_1"));
//为新添加的文件上传控件,设置CSS样式
var current_file = document.getElementById(id_current);
current_file.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;";
//为文件上传控件想对应的删除按钮,设置CSS样式
var current_file_delete = document.getElementById(id_current_delete);
current_file_delete.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;
}
//删除指定的文件上传控件
function deleteFile(id_current_delete){
//根据删除按钮的id (id_current_delete) 获得 父标签 tr 的id
//当前td标签的父标签tr标签的id
var id_current_tr = "#" + id_current_delete.id + "_tr";
//测试
alert("确定要删除,id为" + id_current_delete.id + "_tr" + " 的文本框吗?");
//jQuery动态删除文件上传控件
$(id_current_tr).remove();
}
</script>
</head>
<body>
<!-- 隐藏标签保存新生成的input 文件上传控件的 id 值 -->
<input type="hidden" id="hidden_input" value="1">
<div id="container">
<table class="zebra">
<caption>SpringMVC 实现多文件上传</caption>
<thead>
<tr>
<th>项目名称</th>
<th>简单描述</th>
<th>用到的技术</th>
<th>查看详情</th>
</tr>
</thead>
<tbody>
<tr>
<td>SpringMVC 实现多文件上传</td>
<td>一次上传多个文件</td>
<td>SpringMVC + Ajax + MySQL</td>
<td></td>
</tr>
<c:forEach items="${mytest}" var="item">
<tr>
<td>${item.myid}</td>
<td>${item.mydata}</td>
<td>${item.myname}</td>
<td>操作</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<!-- Ajax Asynchronous request test -->
<div id="container">
<table class="zebra">
<thead>
<tr>
<th>一,SpringMVC 与 ajax 交互测试</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="button" name="determine_url" id="input_url" value="点击体验ajax请求"/></td>
</tr>
<tr>
<td><input type="text" name="determine_url" id="response_text_1" value="这里显示ajax异步请求的数据,数据来自服务器端"/></td>
</tr>
<tr>
<td><input type="text" name="determine_url" id="response_text_2" value="这里显示ajax异步请求的数据,数据来自服务器端"/></td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery + JavaScript produce input element dynamic -->
<div id="container">
<table class="zebra">
<thead>
<tr>
<th>二,jQuery + JavaScript 实现动态添加文件上传控件的功能</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>
<!-- jQuery + JavaScript delete input element dynamic -->
<div id="container">
<table class="zebra">
<thead>
<tr>
<th>三,jQuery + JavaScript 实现动态删除文件上传控件的功能</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="file" id="fileToUploadAndDelete_0" /></td>
</tr>
</tbody>
</table>
</div>
<div id="container">
<table class="zebra">
<tbody id="file_input_delete_1">
</tbody>
</table>
</div>
<div id="container">
<table class="zebra">
<tr>
<td><input type="button" id="uploadManyFileAndDelete_button" value="继续添加文件" οnclick="produceAndDeleteInputElement()"/></td>
</tr>
</table>
</div>
<div id="div_bottom">
<table>
<thead>
<tr>
<th>@2016 JavaSpider 沪XXX 版权所有 All Right Reserved</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
说明:
1,jQuery直接通过官方的CDN引入;
<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>
2,CSS代码
<link rel="stylesheet" href="CSS/myapplications.css" type="text/css" />
myapplications.css
@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,#fileToUploadAndDelete_0,#uploadManyFileAndDelete_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;
}
3,难点:如何为新生成的input文件上传文本控件,添加唯一id 。
由于每一个<input type="file" , id="唯一id" > 元素 的id都必须是唯一的,所以这里我们不能把id写死,一旦写死,后面删除指定的input 标签 就会有麻烦。我们这里是怎么实现的呢,我们通过一个隐藏标签来实现,如下:
<!-- 隐藏标签保存新生成的input 文件上传控件的 id 值 的 后缀 -->
<input type="hidden" id="hidden_input" value="1">
我们用input隐藏标签,来保存当前的
<input type="file" , id="唯一id" > 的id的值的后缀,流程如下:
a,添加文本框之前,我们从隐藏标签中获取id值,也就是我们上面的 1,初始值设定为1;
b,我们把指定的前缀 fileToUploadAndDelete_ 和 获取的后缀 1 拼接起来,就构成了我们的<input type="file" , id="唯一id" > 的唯一id;
c,然后我们就可以使用jQuery的append方法,把新生成的<input type="file" , id="唯一id" >动态添加到页面中了;
d,把后缀值转换成整数 ,加上1,保存到隐藏文本框(也就是更新隐藏标签中的值);
代码如下:
//点击按钮,动态添加文件上传控件,并且能够动态删除文件上传控件
function produceAndDeleteInputElement(){
//定义一个变量,表示当前input文本框的id值的前缀
var id_prefix = "fileToUploadAndDelete_";
//获取隐藏标签,从隐藏标签中获取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;
//当前删除按钮的id
var id_current_delete = id_current + "_delete";
//当前td标签的父标签tr标签的id
var id_current_tr = id_current_delete + "_tr";
//生成新标签
$('<tr id="' + id_current_tr + '"><td><input type="file" id="' + id_current + '" /></td><td><input type="button" id="' + id_current_delete + '" value="取消上传"
οnclick="deleteFile('+id_current_delete+')"></td></tr>').appendTo($("#file_input_delete_1"));
//为新添加的文件上传控件,设置CSS样式
var current_file = document.getElementById(id_current);
current_file.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;";
//为文件上传控件想对应的删除按钮,设置CSS样式
var current_file_delete = document.getElementById(id_current_delete);
current_file_delete.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;
}
4,难点:删除时,如何保证把
<input type="file" , id="唯一id" >标签的父标签一起删除,也就是说,我们在执行删除时,需要删除掉的是我们添加的所有内容,也就是下面这些html标签:
<tr>
<td><input type="file" id="fileToUploadAndDelete_1" /></td><td><input type="button" id="fileToUploadAndDelete_1_delete" /></td>
</tr>
这里我们同样采用有规律的id来操作,什么意思呢,也就是说,我们在生成<input type="file" , id="唯一id" > 的唯一id时,根据我们
自定义的规则,动态生成删除按钮<input type="button" id="fileToUploadAndDelete_1_delete" /> 的id,然后在动态生成父标签tr标签
的id <tr id="fileToUploadAndDelete_1_delete_tr"></tr>。也就是说我们必须要保证,我们动态生成的所有html元素,对我们来说都是
透明的、可操作的。
//删除指定的文件上传控件
function deleteFile(id_current_delete){
//根据删除按钮的id (id_current_delete) 获得 父标签 tr 的id
//当前td标签的父标签tr标签的id
var id_current_tr = "#" + id_current_delete.id + "_tr";
//测试
alert("确定要删除,id为" + id_current_delete.id + "_tr" + " 的文本框吗?");
//jQuery动态删除文件上传控件
$(id_current_tr).remove();
}
好了,来通过流程总结一下:
a,我们自定义新生成的文件上传标签<input type="file" , id="唯一id" > 的id的前缀为 fileToUploadAndDelete_
b,我们通过隐藏标签<input type="hidden" id="hidden_input" value="1">,获得后缀1,此时唯一id 就是:fileToUploadAndDelete_1
c,我们约定新生成的删除按钮<input type="button" id="删除按钮id" > 的id ,是在fileToUploadAndDelete_1的基础上加上后缀_delete,那么此时 删除按钮id 就是 :fileToUploadAndDelete_1_delete
d,同样的,我们约定新生成的父标签tr <tr id="父标签tr的id">的id,是在fileToUploadAndDelete_1_delete
那么此时 父标签tr的id 就是:fileToUploadAndDelete_1_delete_tr
OK,这是我们就实现了动态添加的所有标签都有一个唯一id,所有的标签,都是可操作的。
今天就介绍到这里,至此,一次上传多张图片的前台工作基本上都解决了。稍后继续完善后台功能,一次上传多张图片。我们使用的是JavaScript、jQuery、ajax、SpringMVC、MySQL数据库。敬请期待...