多文件上传HTML/CSS/JS

Question

我想增加一个多文件上传按钮到我的申请表格在我的网站。直到现在，我可以一次上传多个文件，并显示这些文件的列表。然而，我现在也想首先上传几个文件，并看到列表，然后我希望能够添加更多的文件，并有该列表停留。但是，到目前为止，当我这样做时，已经上传的文件列表就会消失。这是HTML、CSS和JS代码，我一直使用到现在。如果有人能给我如何在代码中更改这一点的提示，我会很高兴的。

如果我的问题有错误，我很抱歉。这是我第一次使用stackoverflow,英语不是我的第一语言。

谢谢你的帮助！：）

null

updateList = function() {
      var input = document.getElementById('file');
      var output = document.getElementById('fileList');
      var children = "";
      for (var i = 0; i < input.files.length; ++i) {
          children +=  '<li>'+ input.files.item(i).name + '<span class="remove-list" onclick="return this.parentNode.remove()">X</span>' + '</li>'
      }
      output.innerHTML = children;
  }

.custom-file {
  position: relative;
  font-family: helvetica;
  overflow: hidden;
  margin-bottom: 30px;
  margin-top: 30px;
  width: auto;
  display: block;
  padding: 10px;  
}

.custom-file-input{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  z-index: 100;
}

.custom-file img{
  vertical-align: middle;
  margin-right: 10px;
}

ul.file-list{
  font-family: helvetica;
  list-style: none;
  padding: 0;
}

ul.file-list li{
  padding: 5px;
}

.remove-list{
  cursor: pointer;
  margin-left: 10px;
}

<div class="custom-file">
    <input type="file" class="custom-file-input" id="file" multiple onchange="javascript:updateList()" border=">
    <label class="custom-file-label" for="file">
      <img width="30" src="https://image.flaticon.com/icons/svg/54/54565.svg" /> Dateien auswählen</label>
</div>
<ul id="fileList" class="file-list"></ul>

null

Answer 1

null

updateList = function() {
      var input = document.getElementById('file');
      var output = document.getElementById('fileList');

      var li = document.createElement("li");
      li.innerHTML = 
        `${input.files[input.files.length - 1].name}
          <span 
            class="remove-list" 
            onclick="return this.parentNode.remove()"
          >X</span>`;
      output.appendChild(li);
  }

.custom-file {
  position: relative;
  font-family: helvetica;
  overflow: hidden;
  margin-bottom: 30px;
  margin-top: 30px;
  width: auto;
  display: block;
  padding: 10px;  
}

.custom-file-input{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  z-index: 100;
}

.custom-file img{
  vertical-align: middle;
  margin-right: 10px;
}

ul.file-list{
  font-family: helvetica;
  list-style: none;
  padding: 0;
}

ul.file-list li{
  padding: 5px;
}

.remove-list{
  cursor: pointer;
  margin-left: 10px;
}

<div class="custom-file">
    <input 
      type="file" 
      class="custom-file-input" 
      id="file" 
      multiple 
      onchange="javascript:updateList()" 
      border=""
    />
    <label class="custom-file-label" for="file">
      <img 
        width="30" 
        src="https://image.flaticon.com/icons/svg/54/54565.svg" 
      /> 
      Dateien auswählen
    </label>
</div>
<ul id="fileList" class="file-list"></ul>