Javascript 引导多文件选择-仅显示第一个文件

我使用引导自定义文件输入-这是一件非常好的事情，但我不知道如何显示所有上传的文件。每次我尝试选择多个文件并上传它们时，输入表单中只显示第一个文件，所有文件都正确通过，除了这个文件

代码

选择文件
//如果希望文件名显示在“选择”菜单上，请添加以下代码
$（“.custom file input”）.on（“更改”，函数（）{
var fileName=$（this.val（）.split（“\\”）.pop（）；
$（this）.sides（“.custom file label”）.addClass（“selected”）.html（文件名）；
});

---

我可以添加

multiple=”“

来形成代码-但是我应该添加什么来使所有上传文件显示在输入行中呢？

在jQuery中，您可以通过输入元素的

.prop（'files'）

访问FileObject，请参见下面的测试

$（“输入”）。关于（“输入”，函数（）{
变量名称=$（this.prop（'files'）；
对于（var i=0；i

选择文件
这是你想看到的吗？我不确定value属性在文件输入上的行为，但您肯定可以在输入的files属性中看到每个文件，所以我只是用它创建了一个字符串


//如果您希望文件名出现在select上，请添加以下代码
$（“.custom file input”）.on（“更改”，函数（）{
var files=Array.from（this.files）
var fileName=files.map（f=>{return f.name}）.join（“，”）
$（this）.sides（“.custom file label”）.addClass（“selected”）.html（文件名）；
});

选择文件
通常，这取决于您使用的浏览器。您可以使用并自行处理文件名的显示（）。请尝试这样做：
<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
</form>

<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>