Показ имен файлов в customFileInput bootstrap js

Question

В бутстрапе есть возможность поменять кнопку загрузки файлов и стиль строки ввода классом CustomFileInput Но он не показывает в строке ввода названия выбранных файлов. Нашёл вот такой код, который выводит в строку ввода те файлы, которые были выбраны

 <form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
</form>

<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>

Одна проблема - если я ставлю в выборе файла атрибут multiple, чтобы выбирать несколько файлов - в строку все равно пишется имя одного файла.

Т.е. я выбрал допустим файлы 1.png, 2.png, 3.png

Что должно отобразится в строке ввода 1.png, 2.png, 3.png

Что отображается в строке ввода 1.png

Как поменять код скрипта, чтобы он выводил в строку ввода все имена загружаемых файлов?

Answer 1

Вот эта штука будет работать. Тут мы сначала берем из загруженных файлов их имена, потом собираем их в одну строку, попутно добавляя в конце запятые, если строка не последняя.

   $("input").on("input", function() {
        var names = $(this).prop('files');
        var str = "";
        for (var i = 0; i < names.length; i++) {
            str += names[i].name;
            if (i !== (names.length - 1)) {
                str += ", ";
            }
        }
        $(this).siblings(".custom-file-label").addClass("selected").html(str);
    });


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile" multiple="multiple">
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
</form>

БЛОГ НА HUSL

Показ имен файлов в customFileInput bootstrap js

Ответы (1 шт):