Bootstrap的fileinput插件实现多文件上传的方法

下面我来介绍一下Bootstrap的fileinput插件实现多文件上传的方法。

1. 插件介绍

Bootstrap的fileinput插件是一个强大的文件上传插件，支持多文件上传、图片预览等功能，而且使用起来也非常方便，只需要简单的配置和调用就可以了。

2. 安装插件

你可以通过多种方法来安装Bootstrap的fileinput插件，比如使用CDN、下载源文件等方式。这里我以使用CDN为例来介绍。

在你的HTML页面中添加以下代码段：

<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.1.2/css/fileinput.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/piexif.min.js" type="text/javascript"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/sortable.min.js" type="text/javascript"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.1.2/js/fileinput.min.js" type="text/javascript"></script>

3. 使用插件

使用插件的过程中需要使用jQuery库，所以你还需要在你的页面中引入jQuery库。

下面是一个示例：

<input id="input-id" type="file" multiple class="file-loading">

然后在JavaScript中，你需要调用fileinput()函数来实现插件的初始化：

$("#input-id").fileinput({
    uploadUrl: '/upload/url',
    allowedFileExtensions: ['jpg', 'png', 'gif'],
    maxFileSize: 1000,
    maxFilesNum: 10,
    language: 'zh',
    showPreview: true,
    showCaption: true,
    showUploadedThumbs: false,
    showCancel: false,
    showRemove: false,
    showUpload: false,
    overwriteInitial: false,
    theme: 'fa',
    browseClass: "btn btn-primary",
    removeClass: "btn btn-danger",
    cancelClass: "btn btn-default",
    uploadClass: "btn btn-success",
});

其中，uploadUrl是上传文件的接口地址，allowedFileExtensions是允许上传的文件类型，maxFileSize是允许上传的最大文件大小，maxFilesNum是允许上传的最大文件数量，language是调用插件时的语言，overwriteInitial是是否覆盖原有文件等等。

4. 示例说明

示例1：

下面是一个示例，上传的图片会显示缩略图并可以进行预览：

<div class="file-loading">
  <input id="input-1" type="file" name="input-1[]" multiple>
</div>

<script>
$("#input-1").fileinput({
    showUpload: false,
    allowedFileExtensions: ["jpg", "png", "gif"],
    elErrorContainer: "#errorBlock",
    showCaption: false,
    browseClass: "btn btn-primary btn-lg",
    fileType: "image"
});
</script>

示例2：

下面是另一个示例，上传的文件可以直接在上传完成后进行下载：

<input id="file-1" type="file" multiple class="file-loading">

<script>
$("#file-1").fileinput({
    uploadUrl: '#',
    allowedFileExtensions: ["jpg", "png", "gif"],
    overwriteInitial: false,
    maxFileSize: 1000,
    maxFilesNum: 10,
    dropZoneEnabled: false,
    showPreview: false,
    showUpload: true,
    showRemove: true,
    showCaption: false,
    browseClass: "btn btn-primary btn-lg",
    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
});
</script>

结语

这就是Bootstrap的fileinput插件实现多文件上传的方法，希望对你有所帮助。如果你想要了解更多内容，可以查看fileinput官方文档。