Bootstrap文件输入不显示动态添加文件输入的文件名 [英] Bootstrap file input not displaying file name for dynamicaly added file inputs

问题描述

我正在使用引导文件输入。它不显示浏览的文件名称动态添加的文件输入。这是代码，

HTML

 < div class =containerstyle =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> 
浏览& hellip; < input type =filemultiple> 
< / span> 
< / span> 
< input type =textclass =form-controlreadonly> 
< / div>< br /> 
< / div> 
< a href =＃id =new-btn>新增< / 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; 
最小宽度：100％; 
最低身高：100％; 
 font-size：100px; 
 text-align：right; 
 filter：alpha（opacity = 0）; 
 opacity：0; 
背景：红色; 
 cursor：inherit; 
 display：block; 
} 
 input [readonly] {
 background-color：white！important; 
 cursor：text！important; 
 
  

JQUERY

  $（document）.ready（function（）{
 $ {
 $（'＃new-div'）。append（$（'。fileinputs'）。html（））; 
}）; 
 
 $（'。btn （file.select），函数（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）; 
} 
 
}）; 
}）; 
 $ b $（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 。如何在相应位置显示浏览过的文件名？

解决方案

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

$ $ $ $ $ $ $ $ $ $ $ $ $（document）.on（'fileselect'，'.btn-file：file'，function（event ，numFiles，label）{
//你的代码...
}）;

更新的小提琴

I am using bootstrap file input. Its not showing browsed files name for dynamically added file inputs. This is code,

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

By using this code I can see the file name only on the first file field. For dynamically added file inputs its not working.

This is my jsfiddle. How can I show the browsed file names on corresponding locations ?

解决方案

You need to use a delegated event handler to catch your fileselect event as the new file inputs are dynamically appended to the DOM after page load, where the original handler is attached. Try this:

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

Updated fiddle

这篇关于Bootstrap文件输入不显示动态添加文件输入的文件名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！