jQuery + JavaScript 实现的动态添加文本框功能（一）

最新推荐文章于 2024-04-26 10:14:46 发布

春秋战国程序猿

最新推荐文章于 2024-04-26 10:14:46 发布

阅读量6.4k

点赞数

分类专栏： jQuery web前端文章标签： javascript jquery spring mvc Web Web前端

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

版权

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

14 篇文章 0 订阅

订阅专栏

jQuery

6 篇文章 0 订阅

订阅专栏

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;
}

如果用户选择的图片想删除掉，也就是不想上传这张图片了，我们应该能够删除指定的文本框。实际批量上传文件的项目中，我们还需要完善删除文本框的功能。稍后会继续更新完善功能。

春秋战国程序猿

关注

0
点赞
踩
1

收藏

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

jQuery + JavaScript 实现的动态添加文本框功能 1.0版本，这个功能在一次上传多个文件时，经常会用到，这篇文章主要实现动态添加文件上传控件的功能。<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName(
复制链接

扫一扫