Javascript 多文件上传HTML/CSS/JS

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

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

谢谢你的帮助！：）

updateList=function（）{
var input=document.getElementById（'file'）；
var output=document.getElementById（'fileList'）；
var children=“”；
对于（var i=0；i'
}
output.innerHTML=子对象；
}

。自定义文件{
位置：相对位置；
字体系列：helvetica；
溢出：隐藏；
边缘底部：30px；
边缘顶部：30px；
宽度：自动；
显示：块；
填充：10px；
}
.自定义文件输入{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
光标：指针；
不透明度：0；
z指数：100；
}
.自定义文件img{
垂直对齐：中间对齐；
右边距：10px；
}
文件列表{
字体系列：helvetica；
列表样式：无；
填充：0；
}
ul.file-list li{
填充物：5px；
}
.删除列表{
光标：指针；
左边距：10px；
}

不要直接更改输出的HTML，只需使用
appendChild（）
将元素添加到末尾即可


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}
X`；
输出。追加子项（li）；
}
。自定义文件{
位置：相对位置；
字体系列：helvetica；
溢出：隐藏；
边缘底部：30px；
边缘顶部：30px；
宽度：自动；
显示：块；
填充：10px；
}
.自定义文件输入{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
光标：指针；
不透明度：0；
z指数：100；
}
.自定义文件img{
垂直对齐：中间对齐；
右边距：10px；
}
文件列表{
字体系列：helvetica；
列表样式：无；
填充：0；
}
ul.file-list li{
填充物：5px；
}
.删除列表{
光标：指针；
左边距：10px；
}

Dateien auswählen
非常感谢您的帮助！祝你今天愉快：D