引導程序文件輸入不顯示動態添加文件輸入的文件名

我正在使用引導文件輸入。它沒有顯示動態添加文件輸入的瀏覽文件名稱。這是代碼，引導程序文件輸入不顯示動態添加文件輸入的文件名

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。如何在相應位置顯示瀏覽過的文件名？

來源

2016-01-12 Vinod VT

您需要使用委託事件處理程序來捕獲您的fileselect事件，因爲新的文件輸入會在附加了原始處理程序的頁面加載後動態附加到DOM。試試這個：

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

Updated fiddle

來源

2016-01-12 08:08:15

引導程序文件輸入不顯示動態添加文件輸入的文件名

回答

相關問題