Question

我正在使用Krajee的Bootstrap文件上传插件进行文件输入＆amp;我正在尝试克隆文件输入，以便用户可以添加来自不同文件夹的多个文件，而不是一次选择它。我面临的问题是在文件输入被克隆之后，它表现得很奇怪。我为此设置了一个小提琴。当我尝试重置或清除文件输入时，它总是清除第一个输入。一直在尝试很多选择＆amp;花了这么多时间决定在这里发帖。 JS小提琴： https://jsfiddle.net/asfg9mna/

有关如何使其正常工作的任何想法？问题是每当我点击删除图标时，它总是删除第一个输入的文件＆amp;不是现在的。

HTML code：

<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文件上传克隆

1 个答案: