Question

我正在使用bootstrap文件输入。它没有显示动态添加的文件输入的浏览文件名。这是代码，

HTML

<div class="container" style="margin-top: 20px;">
<div class="row">
    <div class="col-lg-6 col-sm-6 col-12">
        <div class="fileinputs">
            <div class="input-group">
                <span class="input-group-btn">
                    <span class="btn btn-primary btn-file">
                        Browse&hellip; <input type="file" multiple>
                    </span>
                </span>
                <input type="text" class="form-control" readonly>
            </div><br/>
        </div>
        <a href="#" id="new-btn">Add New</a>
        <div id="new-div"></div>
    </div>
</div>

CSS

.btn-file {


 position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  background: red;
  cursor: inherit;
  display: block;
}
input[readonly] {
  background-color: white !important;
  cursor: text !important;
}

JQUERY

$(document).ready( function() {
    $('#new-btn').on('click', function(){
        $('#new-div').append($('.fileinputs').html());
    });

    $('.btn-file :file').on('fileselect', function(event, numFiles, label) {

        var input = $(this).parents('.input-group').find(':text'),
        log = numFiles > 1 ? numFiles + ' files selected' : label;

        if( input.length ) {
            input.val(log);
        } else {
            if( log ) alert(log);
        }

    });
});

$(document).on('change', '.btn-file :file', function() {
      var input = $(this),
          numFiles = input.get(0).files ? input.get(0).files.length : 1,
          label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
      input.trigger('fileselect', [numFiles, label]);
    });

通过使用此代码，我只能在第一个文件字段中看到文件名。对于动态添加的文件输入，它不起作用。

这是我的jsfiddle。如何在相应位置显示浏览的文件名？

Answer 1

您需要使用委托事件处理程序来捕获fileselect事件，因为在页面加载后，新文件输入会动态附加到DOM，其中附加了原始处理程序。试试这个：

$(document).on('fileselect', '.btn-file :file', function(event, numFiles, label) {
    // your code...
});

Updated fiddle

Bootstrap文件输入不显示动态添加文件输入的文件名

1 个答案: