動態添加或刪除輸入字段，因爲它們是必需的

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可能需要調試