Показать все выбранные файлы

Question

У меня есть поле ввода, которое позволяет мне выбирать многократные файлы (изображения в моем случае), проблема в том, что, когда я выбираю больше одного файла, он будет показывать только один из них в 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> 

Answer 1

Это не имеет никакого отношения к вашему браузеру.

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

$(this).prop('files'); действительно содержит все загруженные файлы в качестве объекта FileList.

Loop свойство файлы и поместить все имена в вашем #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++) { 
 
    \t $('#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

Answer 2

Попробуйте использовать спецификацию amp в выборе браузеров