动态添加或删除输入字段，因为它们是必需的

Question

我有一个多文件输入的设置，我通过隐藏输入，在html/css中创建我自己的样式，然后通过jQuery控制原始输入获得功能。

我希望能够再添加一个输入和相关的HTML，如果所有的投入都充满，就像这样：

• 从1开始输入
• 如果这被涂抹/使用，添加其他输入
• 重复
• 删除清除的输入，只留下1个空的输入使用。

我尝试创建我的代码一个js小提琴，但它似乎并没有通过它来工作，所以下面就以我的网站上测试的链接：LINK

和代码，JS：

$('.file-browse').click(function(){ 
    var thisone = $(this).attr('id'); 
    $('input[name="input-'+ thisone+'"]').click(); 
}); 

$('input[type="file"]').on('change', function(){ 
    var thetext = $(this).val(); 
    var thetextsplit = thetext.split('\\').pop(); 
    var thisone = $(this).attr('name').split('-').pop(); 
    if($('div[id^="info-file"]').text() == thetextsplit){ 
     alert('you have already selected this file'); 
     $(this).replaceWith($(this).val('').clone(true)); 
    } 
    else{ 
     $('#info-'+ thisone).text(thetextsplit); 
     $('#clear-'+ thisone).fadeIn(100); 
    } 
}); 

$('.file-clear').click(function(){ 
    var thisone = $(this).attr('id').split('-').pop(); 
    $('input[name="input'+ thisone +'"]').replaceWith($('input[name="input'+ thisone +'"]').val('').clone(true)); 
    $('#info-'+ thisone).text(''); 
    $(this).fadeOut(100); 
}); 

HTML：

<div class="file-container"> 
     <div class="file-info" id="info-file1"></div> 
     <div class="file-browse" id="file1">Browse</div> 
     <div class="file-clear" id="clear-file1">X</div> 
    </div> 

    <div class="file-container"> 
     <div class="file-info" id="info-file2"></div> 
     <div class="file-browse" id="file2">Browse</div> 
     <div class="file-clear" id="clear-file2">X</div> 
    </div> 


    <div class="file-container"> 
     <div class="file-info" id="info-file3"></div> 
     <div class="file-browse" id="file3">Browse</div> 
     <div class="file-clear" id="clear-file3">X</div> 
    </div> 

    <form action="" method="POST" enctype="multipart/form-data"> 
    <input type='file' name="input-file1" class="file-input-hidden" /> 
     <input type='file' name="input-file2" class="file-input-hidden" /> 
     <input type='file' name="input-file3" class="file-input-hidden" /> 
    <input type="submit" style="clear:both; float:left;"/> 
    </form> 

CSS：

.file-container{ 
clear:both; 
float:left; 
width:445px; 
height:40px; 
overflow:hidden; 
padding:0; 
margin:0; 
} 

.file-info{ 
float:left; 
width:250px; 
height:15px; 
padding:5px; 
border-radius:5px; 
-webkit-border-radius:5px; 
border:1px solid #95d2d2; 
margin:0 20px 0 0; 
font-family:Verdana, Geneva, sans-serif; 
font-size:14px; 
color:#373737; 
overflow:hidden; 
} 

.file-browse{ 
float:left; 
width:100px; 
height:15px; 
padding:3px 5px 8px 5px; 
border-radius:5px; 
-webkit-border-radius:5px; 
border:1px solid #95d2d2; 
background-color:#02b3b3; 
color:#ffffff; 
font-family:Arial, Gadget, sans-serif; 
font-size:16px; 
font-weight:bold; 
letter-spacing:normal; 
text-align:center; 
cursor:pointer; 
} 

.file-input-hidden{ 
opacity:0; 
visibility:hidden; 
float:left; 
} 

.file-clear{ 
display:none; 
float: left; 
width: 18px; 
height: 18px; 
padding: 5px; 
color: #ffffff; 
background-color: #CC0000; 
font-family: Verdana, Geneva, sans-serif; 
font-size: 14px; 
font-weight: bold; 
margin-left: 20px; 
text-align: center; 
border-radius: 5px; 
cursor:pointer; 
} 

对不起长篇帖子！我不确定迄今为止展示我的作品的最佳方式。

Answer 1

Rpsep，

我想事情会更简单以A开头的模板：

<div id="input_template" style="display:none;"> 
    <div class="file-container"> 
     <div class="file-info"></div> 
     <div class="file-browse">Browse</div> 
     <div class="file-clear">X</div> 
    </div> 
    <input type='file' name="input-file[]" class="file-input-hidden" /> 
</div> 

注：

• 只有外部容器有一个id;一切都有一堂课。
• 不要担心输入元素与其他任何东西在同一个容器中;克隆后将它放在适当的地方。

然后附加功能模板：

$("#input_template").find('.file-browse').on('click', function() { 
    $(this).closest(".file-container").data('hidden').click(); 
}); 

$("#input_template").find('.file-clear').on('click', function(){ 
    $container = $(this).closest(".file-container"); 
    $container.data('hidden').remove(); 
    $container.remove(); 
}); 

$('#input_template').find(".file-input-hidden").on('change', function(){ 
    var val = $(this).val().split('\\').pop(); 
    var $visible = $(this).data('visible'); 
    var $matches = $(".file-info").filter(function() { 
     return $(this).text() === val; 
    }); 
    if($matches.length > 0) { 
     alert('You have already selected this file'); 
     var $clone = $this.val('').clone(true); 
     $visible.data('hidden', $clone); 
     $this.replaceWith($clone); 
    } 
    else{ 
/* 
     $visible.find(".file-info").text(val); 
     $visible.find(".file-clear").fadeIn(100); 
     makeInputSet(); 
*/ 
     var $fi = $visible.find(".file-info"); 
     if(!$fi.text()) 
      makeInputSet(); 
     $fi.text(val).end().find(".file-clear").fadeIn(100); 
    } 
}); 

这可能会更好委派事件处理至容器，但是这个代码更容易编写，基于问​​题的代码。

调用与下面的函数模板，然后立即调用它创建的第一个实例：

function makeInputSet() { 
    var $visible = $("#input_set").find(".file-container").clone(true, true).appendTo("#...");//appropriate selector required 
    var $hidden = $("#input_set").find(".file-input-hidden").clone(true, true).appendTo("#...");//appropriate selector required 
    $visible.data('hidden', $hidden); 
    $hidden.data('visible', $visible); 
} 

makeInputSet(); 

注：

• makeInputSet()然后从“变化”的处理程序，每当内部调用现有的输入字段（及其可见对象）被填充。
• 这两个.data()调用确保隐藏元素和可见元素具有相互通信的方式，而无需字符串处理id或形成效率较低的闭包。

一切都是未经测试，therfore可能需要调试