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

【问题标题】：How to get multiple file selection into an array and then output to HTML如何将多个文件选择放入一个数组中，然后输出到 HTML
【发布时间】：2019-12-09 01:22:52
【问题描述】：

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

最初会给出一个计数 - 如果您上传三个文件，则会出现“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

<input type="file" name="uploadedFile" class="inputfile" id="uploadedFileTest" data-multiple-caption="{count} files selected" multiple>
<label for="uploadedFileTest" id="uploadFileTest"><img class="total-center" src=""></label>
<p id="fileStatus"></p>
<p id="fileName"></p>

var inputs = document.querySelectorAll('.inputfile');
Array.prototype.forEach.call(inputs, function (input) {
    var label = input.nextElementSibling,
        labelVal = label.innerHTML;


        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);
        } else {
            fileName = e.target.value.split('\\').pop();
            console.log("I am running");
        }
        if (fileName) {
            $('#fileName').html(fileName);
            $('#fileStatus').text('File attached!');
        } else {
            label.innerHTML = labelVal;
        }
    });
});

【问题讨论】：

标签： javascript jquery arrays file

【解决方案1】：

this.files 返回FileList。为了将其转换为文件名数组，您可以简单地：

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

Array.from：从类数组或可迭代对象创建一个新的、浅拷贝的 Array 实例。

map()：使用对调用数组中的每个元素调用提供的函数的结果创建一个新数组。

$('#uploadedFileTest').on('change', function(e) {
    if (this.files && this.files.length > 1) {
        fileName = Array.from(this.files).map(({name}) => name + '<br/>');
        $('#fileName').append(fileName);
        /*
          A different solution: 
        
        fileName = Array.from(this.files).map(({name}) => name);
        $('#fileName').append(fileName.join('<br/>'));
        
        */
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="file" name="uploadedFile" class="inputfile" id="uploadedFileTest" data-multiple-caption="{count} files selected" multiple>
<label for="uploadedFileTest" id="uploadFileTest"><img class="total-center" src=""></label>
<p id="fileStatus"></p>
<p id="fileName"></p>

【讨论】：

谢谢。如何将数组结果作为列表输出？我以为拆分和弹出功能做到了这一点？这是我刚刚尝试过的。 fileName = Array.from(this.files).map(({name}) => name); fileName = JSON.stringify(fileName); fileName = fileName.split('\\').pop();
@Paul 你可以直接在地图回调中做。片段已更新。

【解决方案2】：

您可以循环使用 ES6 Array.from() 将 FileList 转换为 Array 的文件输入文件，如下所示：

let input = document.getElementById('uploadedFileTest');
input.addEventListener('change', function(e) {
  var filenames = document.getElementById('fileNames');
  if (e.target.files.length > 0){
    Array.from(e.target.files).forEach((file) => {
      filenames.innerHTML += '<br>' + file.name;
    })
  }
  
});

<input type="file" name="uploadedFile" class="inputfile" id="uploadedFileTest" data-multiple-caption="{count} files selected" multiple>

<label for="uploadedFileTest" id="uploadFileTest"><img class="total-center" src=""></label>
<p id="fileNames"></p>

您的代码缺少一个事件侦听器。您只在页面加载时运行过一次。

【讨论】：