Javascript 多文件上载，onchange操作未触发

我正在开发一个网站，需要我为用户启用多文件上传。 我有以下输入字段：

<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]);
      }
});
}

window.onload=函数（）{
$（“#文件上载”）.change（函数（）{
console.log（this.files）；
if（this.files&&this.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
document.querySelector（“.carousel-inner”）.innerHTML+=`
`
$（“#转盘采样指示器”）.carousel（‘下一个’）
}
reader.readAsDataURL（this.files[0]）；
}
});
}

上传一个图像文件没有问题，一切正常。但是，当再次单击上载标签并提交图像时，图像将不再显示。经过一些调试（即，

console.log

-stuff:D），我发现，

onchange

-事件没有被触发。有什么问题吗

---

谢谢你的帮助

一次上载多个文件时，必须按以下方式将“输入名称”属性设置为数组：

<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>

---

显示所有图像：

奇怪的是，我仍然得到相同的结果。您是如何生成图像中显示的输出的？你使用问题中的代码了吗？如果没有，你能发布它吗？@Sarius，只是为了好玩，我添加了另一个小提琴，如果你需要附加所有选定的图像，你可以这样做。。。

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);

    });    
});
}