Bootstrap文件上傳克隆

Question

我正在使用Krajee的Bootstrap文件上傳插件文件輸入&我想克隆文件輸入，以便用戶可以從不同的文件夾添加多個文件，而不是一次選擇它。我面臨的問題是在文件輸入被克隆後，它的表現很奇怪。我爲此設置了一個小提琴。 當我試圖重置或清除文件輸入時，它總是清除第一個輸入。花了這麼多小時決定在這裏發帖之後，已經嘗試了很多選擇&。 JS小提琴：https://jsfiddle.net/asfg9mna/

任何想法如何使它工作正常？問題是每當我點擊刪除圖標時，它總是刪除第一個輸入文件&而不是當前文件。

HTML代碼：

<form role="form" id="upload-form" class="form-horizontal"> 
    <div class="addFiles text-nowrap"> 
     <div class="appendClass form-group" style="margin-bottom: 1.5%;"> 
      <label class="col-md-2 control-label" for="input-2">Select Files</label> 
      <div class="col-md-9 col-9-input uploadFile"> 
       <input placeholder="Select Files" id="input-2" name="input2[]" type="file" class="file input-upload" data-show-upload="false" data-show-preview="false"> 
      </div> 
      <button type="button" class="btn btn-box-tool addFilesBtn" data-toggle="tooltip" title="Click to add more files"> 
       <i class="fa fa-plus"> </i> 
      </button> 
      <button type="button" class="btn btn-box-tool closeFilesBtn" data-toggle="tooltip" title="Click to remove this block"> 
       <i class="fa fa-times"> </i> 
      </button> 
     </div> 
    </div> 
</form> 

JS代碼：

//Clone Upload File Div 
$(document).on('click', ".addFilesBtn", function(e) { 
    e.preventDefault(); 
    $(this).tooltip('hide'); 
    $(".appendClass:first").clone(true).appendTo(".addFiles"); 
    $('.closeFilesBtn').show(); 
    $('.closeFilesBtn:first').hide(); 
    //$fileInput = $('.input-upload'); 
    //$fileInput.replaceWith($fileInput = $fileInput.clone(true)); 
    //$('.input-upload').fileinput('clear').fileinput(); 
    $('.uploadFile').next().trigger('reset'); 
}); 

Answer 1

這裏是jsfiddle

更新您的js代碼這樣，

$(document).on('click', ".addFilesBtn", function(e) { 
    e.preventDefault(); 
    $(this).tooltip('hide'); 
    parent_element = $(".appendClass:first"); 
    $(".input-upload").fileinput('destroy'); 
    element = parent_element.clone(); 
    element.appendTo(".addFiles"); 
    $(".input-upload").fileinput(); 

    $('.closeFilesBtn').show(); 
    $('.closeFilesBtn:first').hide(); 
    //$fileInput = $('.input-upload'); 
    //$fileInput.replaceWith($fileInput = $fileInput.clone(true)); 
    //$('.input-upload').fileinput('clear').fileinput(); 
    //$('.uploadFile').next().trigger('reset'); 
}); 

請寫下你的代碼來更新將被克隆的每個元素的id。

編輯

$(document).on('click', ".addFilesBtn", function(e) { 
    e.preventDefault(); 
    $(this).tooltip('hide'); 
    $(".has_clone").each(function() { 
    $this = $(this); 
    var parent_element = $(this).closest(".appendClass"); 
    var $element = parent_element.clone(); 
    $element.find(".file-input").remove(); 
    var counter = parseInt($("#counter").val()) + 1; 
    $element.find(".col-md-9").append('<input placeholder="Select Files" id="input-' + counter + '" name="input2[]" type="file" class="file dynamic_clone input-upload " data-show-upload="false" data-show-preview="false">'); 
    $("#counter").val(counter); 
    $element.appendTo(".addFiles"); 
    $(".input-upload").fileinput({ 
     'showPreview': true 
    }); 
    }); 
$('.closeFilesBtn').show(); 
    $('.closeFilesBtn:first').hide(); 
}); 

//Close addFile div - Upload files 
$(document).on('click', ".closeFilesBtn", function(e) { 
    e.preventDefault(); 
    $(this).closest(".appendClass").hide(); 
}); 

感謝