jquery - 显示所有选定的文件

我有一个输入字段，允许我选择多个文件（在我的例子中是图像），问题是当我选择多个文件时，它只会在google chrome中显示一个。但是，它在IE上工作得很好，所以不确定问题是从哪里来的。知道吗？

<form  action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
    <label class="btn btn-primary" for="my-file-selector">
    <input id="my-file-selector" type="file"  name="files[]" style="display:none;" multiple onchange="$('#upload-file-info').html($(this).val());">Browse</label>
    <span class='label label-info' id="upload-file-info"></span>
    <div style="float:right;">
        <label class="btn btn-primary" for="my-file-selector2">
        <input id="my-file-selector2" type="Submit" style="display:none;" name="search">Import</label>
    </div>
</form>

最佳答案

这与你的浏览器无关。

$(this).val() // This only contains the last file name

$(this).prop('files');确实包含作为文件列表对象上载的所有文件。
循环文件属性并将所有名称放入#upload-file-info

$('#my-file-selector').on('change', function(e){
  $('#upload-file-info').html(""); //clear the info before appending
  var files = $(this).prop('files');
  for (var i = 0; i < files.length; i++) {
  	$('#upload-file-info').append(files[i].name);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form  action="" method="post" enctype="multipart/form-data">
    <label class="btn btn-primary" for="my-file-selector">
    <input id="my-file-selector" type="file"  name="files[]" style="display:none;" multiple>Browse</label>
    <span class='label label-info' id="upload-file-info"></span>
    <div style="float:right;">
        <label class="btn btn-primary" for="my-file-selector2">
        <input id="my-file-selector2" type="Submit" style="display:none;" name="search">Import</label>
    </div>
</form>

有关浏览器规格中的文件的详细信息：
FileAPI reference
files property reference