如何将多个文件选择放入数组中，然后输出到HTML [英] How to get multiple file selection into an array and then output to HTML

问题描述

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

I have a file upload application which once a file has been selected a status will appear saying the name of the file. What I am having an issue with is adjusting the case where there is more than one files being uploaded.

最初，将进行计数-如果您上传三个文件，则会出现"3".我试图对此进行调整，以便显示三个文件名.我使用了获取单个文件名的代码来显示fileName = e.target.value.split('\').pop();并尝试将其添加到不止一个条件中:

Originally, a count would be given - if you upload three files, '3' would appear. I am attempting to adjust this so that the three file names are displayed. I took the code getting the single file name to show fileName = e.target.value.split('\').pop(); and tried adding it to the condition is more than one:

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

我得到的是输出的单个文件名.我不知道如何获取数组中的文件名列表以输出.

What I get is a single file name outputted. I can't figure out how to get the file name list in an array to output.

有人看到我需要调整吗?

Does anyone see what I need to adjust?

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

推荐答案

this.files 返回文件列表.要将其转换为文件名数组，您只需:

this.files returns a FileList. In order to convert it to an array of file names you can simply:

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

Array.from :从类似数组或可迭代对象的对象创建一个浅表复制的新Array实例.

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

map() :创建一个新数组，其结果是在调用数组中的每个元素上调用提供的函数.

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>

这篇关于如何将多个文件选择放入数组中，然后输出到HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！