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

感谢