javascript - 当选择文件时，Jquery 显示一个或多个文件名

Question

我尝试在用户提交文件之前显示一个或多个文件名，但截至目前，如果用户决定选择多个文件，我只能显示一个文件名，而不是多个文件名。

Jquery

$(function() {
 $('input:file').change(function(){
     var fileName = $(this).val();
     $('.filenames').html('<div class="name">' + fileName + '</div>');
 });
});

Answer 1

您可以将 for 循环与 this.files.length 结合使用

$(function() {
 $('input:file').change(function(){
    for(var i = 0 ; i < this.files.length ; i++){
      var fileName = this.files[i].name;
      $('.filenames').append('<div class="name">' + fileName + '</div>');
    }
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="files[]" multiple />
<div class="filenames"></div>

或 $.each 与 this.files ^{更新:08/02/2020}

$(function() {
  $('input:file').on('change' , function(){
    $.each(this.files , (i , v) => {
      var filename = v.name;
      $('.filenames').append('<div class="name">' + filename + '</div>');
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="files[]" multiple />
<div class="filenames"></div>