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

Question

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

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

JS

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

Answer 1

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

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

Array.from: creates a new, shallow-copied Array instance from an array-like or iterable object.

map(): creates a new array with the results of calling a provided function on every element in the calling array.

$('#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>