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

来源：互联网发布：姚明新秀赛季各场数据编辑：程序博客网时间：2024/05/17 12:22

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="继续添加文件" onclick="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 0