Javascript 如何将多个文件选择放入一个数组中，然后输出到HTML

我有一个文件上传应用程序，一旦选择了一个文件，就会出现一个状态，显示文件名。我遇到的问题是调整上传多个文件的情况

最初，会给出一个计数——如果你上传三个文件，就会出现“3”。我正在尝试调整此设置，以便显示三个文件名。我使用了获取单个文件名的代码来显示fileName=e.target.value.split'\'.pop；并尝试将其添加到条件不止一个：

if (this.files && this.files.length > 1) {
    //fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
    fileName = e.target.value.split('\\').pop();
    console.log('Here is it ' + fileName);
 }

我得到的是一个单独的文件名输出。我不知道如何在数组中获取要输出的文件名列表

有人知道我需要调整什么吗

HTML

---

您可以使用ES6 Array.from循环文件输入文件，将文件列表转换为数组，如下所示：

让输入=document.getElementById'uploadedFileTest'； input.addEventListener'change'，函数E{ var filenames=document.getElementById'filenames'； 如果e.target.files.length>0{ Array.frome.target.files.forEachfile=>{ filenames.innerHTML+=+file.name； } } };

---

您可以使用ES6 Array.from循环文件输入文件，将文件列表转换为数组，如下所示：

让输入=document.getElementById'uploadedFileTest'； input.addEventListener'change'，函数E{ var filenames=document.getElementById'filenames'； 如果e.target.files.length>0{ Array.frome.target.files.forEachfile=>{ filenames.innerHTML+=+file.name； } } };

此文件返回一个。要将其转换为文件名数组，您只需执行以下操作：

Array.from(this.files).map(({name}) => name)

：从类似数组或可编辑对象创建新的浅复制数组实例

：创建一个新数组，其中包含对调用数组中的每个元素调用提供函数的结果

$'uploadedFileTest'。在'change'上，函数E{ 如果this.files&&this.files.length>1{ fileName=Array.fromthis.files.map{name}=>name+； $'fileName'.appendfileName； /* 另一种解决方案： fileName=Array.fromthis.files.map{name}=>name； $'fileName'.appendfileName.join； */ } }

此文件返回一个。要将其转换为文件名数组，您只需执行以下操作：

Array.from(this.files).map(({name}) => name)

：从类似数组或可编辑对象创建新的浅复制数组实例

：创建一个新数组，其中包含对调用数组中的每个元素调用提供函数的结果

$'uploadedFileTest'。在'change'上，函数E{ 如果this.files&&this.files.length>1{ fileName=Array.fromthis.files.map{name}=>name+； $'fileName'.appendfileName； /* 另一种解决方案： fileName=Array.fromthis.files.map{name}=>name； $'fileName'.appendfileName.join； */ } }

---

谢谢。如何将数组结果作为列表输出？我以为拆分和弹出函数会这样做？这是我刚才试过的。fileName=Array.fromthis.files.map{name}=>name；fileName=JSON.stringifyfileName；fileName=fileName.split'\\'.pop@Paul您可以直接将其放入映射回调中。代码段已更新。谢谢。如何将数组结果作为列表输出？我以为拆分和弹出函数会这样做？这是我刚才试过的。fileName=Array.fromthis.files.map{name}=>name；fileName=JSON.stringifyfileName；fileName=fileName.split'\\'.pop@Paul您可以直接将其放入映射回调中。代码段已更新。

Array.from(this.files).map(({name}) => name)