jQuery + JavaScript 实现的动态添加文本框功能和动态删除文本框功能（二）

最新推荐文章于 2020-11-06 19:09:36 发布

春秋战国程序猿

最新推荐文章于 2020-11-06 19:09:36 发布

阅读量5.9k

点赞数 1

分类专栏： jQuery web前端

本文链接：https://blog.csdn.net/reggergdsg/article/details/50523474

版权

web前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

jQuery

6 篇文章 0 订阅

订阅专栏

接着上一篇

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,

那么此时父标签tr的id 就是：fileToUploadAndDelete_1_delete_tr

OK，这是我们就实现了动态添加的所有标签都有一个唯一id，所有的标签，都是可操作的。

今天就介绍到这里，至此，一次上传多张图片的前台工作基本上都解决了。稍后继续完善后台功能，一次上传多张图片。我们使用的是JavaScript、jQuery、ajax、SpringMVC、MySQL数据库。敬请期待...

春秋战国程序猿

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
jQuery + JavaScript 实现的动态添加文本框功能和动态删除文本框功能（二）

接着上一篇 jQuery + JavaScript 实现的动态添加文本框功能（一）来说。首先看一下效果图：1，jQuery实现的动态添加文本框和动态删除文本框的功能-1-操作前.jpg2，jQuery实现的动态添加文本框和动态删除文本框的功能-2-添加3个文本框.jpg3，jQuery实现的动态添加文本框和动态删除文本框的功能-3
复制链接

扫一扫