Bootstrap4 文件上传

Bootstrap4 是一个非常流行的前端框架，它为开发者提供了许多便利的工具和组件。其中，文件上传就是一个非常常见的需求，Bootstrap4 也为我们提供了相应的组件。

文件上传组件

在 Bootstrap4 中，文件上传组件通常由一个文件 input 和一个按钮组成。具体设计可以根据实际需求进行调整。

以下是一个简单的例子：

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

首先，我们需要一个包含了 input 和 label 的 div，通过 Bootstrap4 提供的 custom-file 类实现样式美化。其中，label 的 for 属性应该对应 input 的 id。

$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});

接着，我们使用 jQuery 为这个组件添加一个 change 事件。在事件处理函数中，我们获取选择的文件名，并更新 label 的文字。

这样，我们就完成了一个简单的文件上传组件。

多文件上传

如果需要实现多文件上传，可以使用 multiple 属性来让 input 允许选择多个文件。同时，我们需要改变 JavaScript 中的事件处理函数，来处理多个文件名。

以下是一个 JavaScript 的例子：

$(".custom-file-input").on("change", function() {
  var names = [];
  for (var i = 0; i < $(this)[0].files.length; ++i) {
    names.push($(this)[0].files[i].name);
  }
  $(this).siblings(".custom-file-label").addClass("selected").html(names.join(", "));
});

在事件处理函数中，我们使用一个数组来存储选择的每一个文件名。最后，我们通过 join 方法将数组中的每个元素用逗号连接成一个字符串，并更新 label 的文字。

结语

通过以上的简单介绍，您已经可以使用 Bootstrap4 实现一个简单的文件上传组件了。同时，多文件上传也非常简单，只需要进行一些小的调整即可。