时间戳

首页 > 解决方案 > 引导多个文件选择 - 仅显示第一个文件

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

问题描述

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

代码

<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>

我可以添加multiple = ""到表单代码 - 但是我应该添加什么来使所有要上传的文件出现在输入行中？

标签： javascripthtmltwitter-bootstrap

解决方案

这是你想看到的吗？我不确定 value 属性在文件输入上的表现如何，但您绝对可以在输入的 files 属性中看到每个文件，所以我只是从中创建了一个字符串。

// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
  var files = Array.from(this.files)
  var fileName = files.map(f =>{return f.name}).join(", ")
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile" multiple>
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
</form>

推荐阅读