Загрузка нескольких файлов, действие onchange не запускается

Question

Я занимаюсь разработкой веб-сайта, который требует от меня включения загрузки нескольких файлов для пользователя. У меня есть следующее поле ввода :

<div class="carousel-item carousel-custom-item active input-wrapper" >
    <input class="d-none" type="file" id="files-upload" name="files" multiple="multiple">
    <label id="files-upload-label" for="files-upload"><i class="fas fa-plus plus fa-4x"></i></label>
</div>

Я хочу напрямую отобразить новое изображение на веб-сайте и в настоящее время использую следующий код:

window.onload = function () {
$("#files-upload").change(function() {
    console.log(this.files);
    if (this.files && this.files[0]) {
        var reader = new FileReader();

        reader.onload = function(e) {
          document.querySelector(".carousel-inner").innerHTML += `
          <div class="carousel-item w-100 h-100 carousel-custom-item">
                <img class="d-block w-100 object-fit carousel-custom-item" src=` + e.target.result + ` alt="slide-element">
          </div>`
          $("#carouselExampleIndicators").carousel('next')
        }

        reader.readAsDataURL(this.files[0]);
      }
});
}

Загрузка только одного файла изображения не проблема, все работает как положено. Но при повторном нажатии на ярлык загрузки и отправке изображения оно больше не отображается. После некоторой отладки (например, console.log -stuff: D) я обнаружил, что onchange -event не запускается. В чем проблема?

Спасибо за помощь!

Answer 1

Когда вы загружаете несколько файлов одновременно, вы должны установить атрибут входного имени в виде массива следующим образом:

<div class="carousel-item carousel-custom-item active input-wrapper" >
    <input class="d-none" type="file" id="files-upload" name="files[]" multiple="multiple">
    <label id="files-upload-label" for="files-upload"><i class="fas fa-plus plus fa-4x"></i></label>
</div>

Обратите внимание на name="files[]", тогда у вас будет в консоли полный FileList объект:

РЕДАКТИРОВАТЬ

Я прокомментировал строку $("#carouselExampleIndicators").carousel('next'), поскольку вызывает исключение (отсутствует plugin).

Этот код, как вы его поделились, вставляет первое изображение в .carousel-inner div. Если вы хотите вставить все выбранные изображения ... тогда вам нужен forEach l oop внутри функции изменения ...

Просто нажмите F12 в Chrome, чтобы увидеть вывод консоли.

Live jsfiddle: https://jsfiddle.net/zsecp6Ld/

EDIT 2

Здесь у вас есть jsfiddle, как вы должны это сделать, если хотите чтобы вставить все выбранные изображения ...

window.onload = function () {
$("#files-upload").change(function() {    

    [].forEach.call(this.files, function(file, index){

         var reader = new FileReader();

       reader.onload = (function(theFile) {
        return function(e) {

            console.log(theFile);

          // Render the image.
          var div = document.createElement('div');
          div.className = 'carousel-item w-100 h-100 carousel-custom-item';
          div.innerHTML = '<img src="'+e.target.result+'" />';
          $(".carousel-inner").append(div);
        };
      })(file);

      reader.readAsDataURL(file);

    });    
});
}

Показать все изображения: https://jsfiddle.net/jktc1whb/