Bootstrap 文件上传克隆

Question

我正在使用 Krajee 的 Bootstrap 文件上传插件进行文件输入，我正在尝试克隆文件输入，以便用户可以从不同的文件夹添加多个文件，而不是一次选择它。我面临的问题是在克隆文件输入后，它的行为很奇怪。我为此设置了 fiddle。当我尝试重置或清除文件输入时，它总是会清除第一个输入。一直在尝试很多选择，并在花了这么多时间后决定 post 在这里。 JS Fiddle: 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();
});

谢谢

Bootstrap 文件上传克隆

Bootstrap File Upload clone

javascript

jquery

html

twitter-bootstrap-3

bootstrap-file-upload