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 是一款功能強大的文件上傳插件，可以輕鬆實現文件上傳、文件刪除、文件校驗等多種功能。除了本文介紹的內容之外，還有許多特性和選項，可以自己去參考官方文檔。