bootstrap-fileinput 文件上传

`bootstrap-fileinput` 是一个基于 Bootstrap 的文件上传插件，提供了丰富的功能和美观的界面。以下是 `bootstrap-fileinput` 的基本用法和一些常见配置选项。

常见配置选项

• - **language**: 设置语言，默认为 `'en'`。
• - **showUpload**: 是否显示上传按钮，默认为 `true`。
• - **showCaption**: 是否显示标题，默认为 `true`。
• - **browseClass**: 浏览按钮的样式类。
• - **previewFileIcon**: 预览文件图标。
• - **allowedFileExtensions**: 允许的文件扩展名数组。
• - **maxFileSize**: 最大文件大小（单位 KB）。
• - **maxFilesNum**: 最大文件数量。
• - **initialPreview**: 初始预览文件数组。
• - **initialPreviewAsData**: 将初始预览文件作为数据。
• - **initialPreviewConfig**: 初始预览文件配置数组。

在 bootstrap-fileinput 插件中，uploadExtraData 选项用于在文件上传时附加额外的数据到请求中。这可以让你在上传文件的同时发送其他相关信息到服务器。下面是如何在 bootstrap-fileinput 中使用 uploadExtraData 的详细说明和示例

$(document).ready(function() {
    $("#fileInput").fileinput({
        language: 'zh',
        showUpload: true,
        showCaption: false,
        browseClass: "btn btn-primary",
        previewFileIcon: "<i class='fas fa-file'></i>",
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        maxFileSize: 1000,
        maxFilesNum: 10,
        uploadUrl: '/path/to/your/upload/script.php',
        uploadExtraData: {
            token: 'your_token_here',
            userId: 123,
            customField: 'customValue'
        },
        onUploadSuccess: function(file, data, response) {
            console.log('File uploaded successfully: ' + file.name);
        }
    });
});

事件

`bootstrap-fileinput` 提供了一些事件，可以用来处理文件上传过程中的各种情况。

$("#fileInput").on("fileselect", function(event, n, l) {
    console.log(n + " file(s) selected");
});

$("#fileInput").on("fileuploaded", function(event, data, previewId, index) {
    console.log("File uploaded: " + data.response.fileName);
});

$("#fileInput").on("filebatchuploadsuccess", function(event, data, previewId, index) {
    console.log("Batch upload success");
});

$("#fileInput").on("filebatchuploadcomplete", function(event, files, extra, response) {
    console.log("Batch upload complete");
});

fileuploaded 事件是在文件成功上传到服务器后触发的事件。你可以利用这个事件来执行一些操作，比如显示成功消息、更新页面状态或处理服务器返回的数据。

$(document).ready(function() {
    $("#fileInput").fileinput({
        language: 'zh',
        showUpload: true,
        showCaption: false,
        browseClass: "btn btn-primary",
        previewFileIcon: "<i class='fas fa-file'></i>",
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        maxFileSize: 1000,
        maxFilesNum: 10,
        uploadUrl: '/path/to/your/upload/script.php',
        uploadExtraData: {
            token: 'your_token_here',
            userId: 123,
            customField: 'customValue'
        }
    }).on('fileuploaded', function(event, data, previewId, index) {
        // 处理文件上传成功后的逻辑
        var form = data.form, files = data.files, extra = data.extra,
            response = data.response, reader = data.reader;
        
        if (response.success) {
            console.log('File uploaded successfully:', files[index].name);
            alert('文件 ' + files[index].name + ' 上传成功！');
        } else {
            console.error('File upload failed:', response.message);
            alert('文件 ' + files[index].name + ' 上传失败：' + response.message);
        }
    });
});

示例

以下是一个完整的示例，展示了如何使用 `bootstrap-fileinput` 进行文件上传。

    <script>
        $(document).ready(function() {
            $("#fileInput").fileinput({
                language: 'zh',
                showUpload: false,
                showCaption: false,
                browseClass: "btn btn-primary",
                previewFileIcon: "<i class='fas fa-file'></i>",
                allowedFileExtensions: ['jpg', 'png', 'gif'],
                maxFileSize: 1000,
                maxFilesNum: 10,
                initialPreview: [
                    "http://example.com/path/to/image1.jpg",
                    "http://example.com/path/to/image2.jpg"
                ],
                initialPreviewAsData: true,
                initialPreviewConfig: [
                    { caption: "image1.jpg", size: 329892, width: "120px", url: "/site/delete", key: 1 },
                    { caption: "image2.jpg", size: 872379, width: "120px", url: "/site/delete", key: 2 }
                ]
            });

            $("#fileInput").on("fileselect", function(event, n, l) {
                console.log(n + " file(s) selected");
            });

            $("#fileInput").on("fileuploaded", function(event, data, previewId, index) {
                console.log("File uploaded: " + data.response.fileName);
            });

            $("#fileInput").on("filebatchuploadsuccess", function(event, data, previewId, index) {
                console.log("Batch upload success");
            });

            $("#fileInput").on("filebatchuploadcomplete", function(event, files, extra, response) {
                console.log("Batch upload complete");
            });
        });
    </script>