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

jQuery 同时被 2 个专栏收录
6 篇文章 0 订阅
14 篇文章 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
    点赞
  • 1
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

春秋战国程序猿

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值