Bootstrapfileinput教程详解

Bootstrapfileinput 是一款基于 Bootstrap 框架的文件上传插件，支持多个文件上传、文件校验、文件删除等多种功能，并且可与各种后端语言结合使用。

一、删除功能

Bootstrapfileinput 具有文件删除功能，可以删除上传成功的文件，如果上传的文件没有成功，将无法使用删除功能。

删除按钮需要添加一个类名“kv-file-remove”，删除按钮可以自定义文本和样式。同时，还需要添加“data-url”属性，该属性的值为删除文件的后端接口地址。

以下是一个实现删除功能的示例代码：

<input id="input-id" type="file" class="file" data-preview-file-type="text">
<script>$(document).on('ready', function() {
    $("#input-id").fileinput({
        uploadUrl: "/file-upload-batch/2",
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        overwriteInitial: false,
        maxFileSize: 1000,
        maxFilesNum: 10,
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });
    $('#input-id').on('fileuploaded', function(event, data, previewId, index) {
        var form = data.form;
        var files = data.files;
        var extra = data.extra;
        var response = data.response;
        var reader = data.reader;
        console.log(data.form);
        console.log(data.files);
        console.log(data.extra);
        console.log(data.response);
        console.log(data.reader);
    });
    $('#input-id').on('filedeleted', function(event, key) {
        $.ajax({
            url: '/file-delete/' + key,
            type: 'DELETE',
            error: function (xhr, status, error) {
                alert(error);
            },
            success: function (data, xhr) {
                alert(data.message);
            },
        });
    });
});</script>

二、表单校验

Bootstrapfileinput 还可以对上传的文件进行基本的校验，包括文件类型、文件大小等。下面是一些常用的表单校验规则：

• allowedFileTypes：允许上传的文件类型，默认是所有的文件类型，多个类型使用逗号分隔。
• allowedFileExtensions：允许上传的文件后缀名，多个后缀名使用逗号分隔。
• maxFileSize：允许上传的最大文件大小，单位是 KB。
• maxFilesNum：允许上传的最大文件数量。

以下是一个实现表单校验的示例代码：

<input id="input-id" type="file" class="file" data-preview-file-type="text">
<script>$(document).on('ready', function() {
    $("#input-id").fileinput({
        uploadUrl: "/file-upload-batch/2",
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        overwriteInitial: false,
        maxFileSize: 1000,
        maxFilesNum: 10,
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });
    $("#input-id").on('filepreupload', function(event, data, previewId, index) {
        var form = data.form;
        var files = data.files;
        var extra = data.extra;
        var response = data.response;
        var reader = data.reader;
        console.log(data);
    });
    $("#input-id").on('fileloaded', function(event, file, previewId, index, reader) {
        console.log(file);
    });
    $("#input-id").on('fileerror', function(event, data, msg) {
        console.log(data);
        console.log(msg);
    });
});</script>

三、选取文件

选取文件是 Bootstrapfileinput 最基本的功能之一，使用起来非常简单。在 HTML 文件中，引入 fileinput.css 和 fileinput.js 文件，并加入以下代码：

<input id="input-id" type="file" class="file" data-preview-file-type="text">
<script>$(document).on('ready', function() {
    $("#input-id").fileinput({
        uploadUrl: "/file-upload-batch/2",
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        overwriteInitial: false,
        maxFileSize: 1000,
        maxFilesNum: 10,
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });
});</script>

可以看到，只需使用 fileinput() 方法即可实现选取文件的功能。

总之，Bootstrapfileinput 是一款功能强大的文件上传插件，可以轻松实现文件上传、文件删除、文件校验等多种功能。除了本文介绍的内容之外，还有许多特性和选项，可以自己去参考官方文档。