Bootstrap FileInput 是一款轻量级的 Web 前端文件上传插件，它非常易于使用并且提供了丰富的功能。本文将介绍如何使用 Bootstrap FileInput 进行文件上传，并展示一些常用的配置选项和 API。
安装
你可以通过以下方式安装 Bootstrap FileInput：
<!-- 引入 CSS 和 JS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap-fileinput@5.1.0/dist/css/fileinput.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap-fileinput@5.1.0/dist/js/fileinput.min.js"></script>
使用
使用 Bootstrap FileInput 进行文件上传非常简单，只需要在页面上创建一个 <input type="file"> 元素，并使用 JavaScript 初始化 FileInput 即可。
以下是一个基本的示例：
<input id="my-file" name="my-file[]" type="file" multiple>
$(document).ready(function() {
$("#my-file").fileinput();
});这段代码会将 #my-file 元素转换为一个文件上传控件。用户可以单击控件选择要上传的文件。该控件默认支持多文件上传，多个文件将显示在控件下方。
上传配置
Bootstrap FileInput 支持许多配置选项，可以根据应用程序的需求进行调整。以下是一些最常用的选项：
showCaption
设置为 false 将隐藏文件上传控件的标题。
$("#my-file").fileinput({
showCaption: false
});showRemove
设置为 false 将隐藏文件上传控件中删除文件的按钮。
$("#my-file").fileinput({
showRemove: false
});showUpload
设置为 false 将隐藏文件上传控件中上传文件的按钮。
$("#my-file").fileinput({
showUpload: false
});allowedFileExtensions
可以通过 allowedFileExtensions 选项指定哪些文件类型可以上传。只有在设置了该选项后，才会对用户选择的文件类型进行验证。
$("#my-file").fileinput({
allowedFileExtensions: ["jpg", "jpeg", "png"]
});maxFileSize
可以通过 maxFileSize 选项限制用户上传的文件大小。
$("#my-file").fileinput({
maxFileSize: 1024 * 10 // 10 MB
});事件处理
Bootstrap FileInput 提供了多个事件，可以用于处理用户与文件上传控件的交互。
以下是一些最常用的事件：
filebatchselected
当用户选择了一个或多个文件时触发。你可以使用此事件将所选文件添加到列表或其他数据结构中。
$("#my-file").on("filebatchselected", function(event, files) {
console.log(files);
});fileuploaderror
当文件上传过程中出现错误时触发。你可以使用此事件显示一个错误消息，并在必要时执行某些处理程序。
$("#my-file").on("fileuploaderror", function(event, data, msg) {
console.log(msg);
});fileuploaded
当文件上传成功时触发。你可以使用此事件执行某些处理程序（例如在页面上显示已上传的文件）。
$("#my-file").on("fileuploaded", function(event, data, previewId, index) {
console.log(data.response);
});总结
Bootstrap FileInput 是一个功能强大且易于使用的文件上传插件。它提供了许多配置选项和事件，可以根据应用程序的需求进行调整。通过阅读本文，您了解了如何使用 Bootstrap FileInput 进行文件上传，并展示了一些常用的选项和 API。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1982