0

ファイル入力に 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');
});
4

1 に答える 1