没有不值得去解决的问题,也没有不值得去学习的技术!

基于 Bootstrap File Input v4.3.2 上传文件时,新增 POST 参数的实现

测试功能,上传文件时,新增 POST 参数 ( type: video ) 成功实现。
1、Bootstrap File Input 是一款非常优秀的HTML5文件上传插件,支持文件预览、多选等一系列特性。基于 Bootstrap File Input v4.3.2 上传文件时,现有参数:upfile、file_id。如图1
Bootstrap File Input 是一款非常优秀的HTML5文件上传插件,支持文件预览、多选等一系列特性。基于 Bootstrap File Input v4.3.2 上传文件时,现有参数:upfile、file_id。
图1
2、现在需要新增参数:type,基于单选按钮的选择:视频、音频,设置其对应值:video、audio。如图2
现在需要新增参数:type,基于单选按钮的选择:视频、音频,设置其对应值:video、audio。
图2
3、参考官网:http://www.bootstrap-fileinput.com/options.html 。配置项:uploadExtraData,将作为数据通过 POST 传递给 url/AJAX 服务器调用的额外数据。 此属性仅适用于 ajax 上传,并且当您为 uploadUrl 设置了值时。如图3
参考官网:http://www.bootstrap-fileinput.com/options.html 。配置项:uploadExtraData,将作为数据通过 POST 传递给 url/AJAX 服务器调用的额外数据。 此属性仅适用于 ajax 上传,并且当您为 uploadUrl 设置了值时。
图3
4、编辑 JS 代码,添加:uploadExtraData: {type: ‘video’},。如图4
编辑 JS 代码,添加:uploadExtraData: {type: 'video'},。
图4


    function initUploadMediaFile(id, type) {
        var container = $('body');
        if (id) {
            container = $(id);
        }
        var uploadFiles = container.find('input[data-target="uploadMediaFile"]');
        $.each(uploadFiles, function (i, v) {
            $_self = $(v);
            var initialPreview = [];
            var initialPreviewConfig = [];
            var previewImage = $('input[name="' + $_self.attr('data-for') + '"]').attr('data-preview') || $('input[name="' + $_self.attr('data-for') + '"]').val();

            if (previewImage) {
                initialPreview.push(previewImage);
                initialPreviewConfig.push({key: getFileName(previewImage)})
            }
            var maxFileSize = 512000;
            var msgSizeTooLargeUnit = '512000KB';
            $_self.fileinput({
                allowedFileTypes: ['video', 'audio'],
                language: 'zh',
                initialPreview: initialPreview,
                initialPreviewConfig: initialPreviewConfig,
                showPreview: false,
                deleteUrl: '',
                // initialPreviewAsData: true,
                multiple: false,
                maxFileSize: maxFileSize,
                msgSizeTooLarge: '建议上传不超过' + msgSizeTooLargeUnit + '大小的图像!',
                allowedFileExtensions: ["'" + type + "'"],
                uploadUrl: "/web-api/vms/upload",
                uploadExtraData: {type: 'video'},
                overwriteInitial: true,
                dropZoneEnabled: false,
                showUpload: false, //是否显示上传按钮
                uploadAsync: true
            }).on("filebatchselected", function(event, files) {
                $(this).fileinput("upload");
            }).on('fileuploaded', function (event, data, previewId, index) {
                $.isLoading('hide');
                if (data.response.code == 0) {
                    // alert(JSON.stringify(data));
                    if (typeof window.uploadFilesSuccess !== 'undefined') {
                        window.uploadFilesSuccess(data.response.id, $(event.target).attr('data-for'));
                    }
                    // $('#'+previewId).attr('data-code',getFileName(data.response.result.attachment));
                    // $('input[name="'+$(event.target).attr('data-for')+'"]').val(data.response.result.original);
                    $('#' + previewId).attr('data-code', getFileName(data.response.id));
                    $('input[name="' + $(event.target).attr('data-for') + '"]').val(data.response.id);
                } else {
                    utils.showNotification('上传文件失败', 3);
                }
            }).on('filecleared', function (event) {
                // console.log(event, 1);
                $('input[name="' + $(event.target).attr('data-for') + '"]').val('');
            }).on('iledeleted', function (event, key) {
                $('input[name="' + $(event.target).attr('data-for') + '"]').val('');
            }).on('filereset', function (event) {
                $('input[name="' + $(event.target).attr('data-for') + '"]').val('');
            }).on('filepreupload', function (event) {
                $('.kv-upload-progress').show();
                $.isLoading({text: '数据提交中,请稍后。。。'});
            }).on('filesuccessremove', function (event, id) {
                $('input[name="' + $(event.target).attr('data-for') + '"]').val('');
            }).on('fileuploaderror', function (event, data, msg) {
                $.isLoading('hide');
                $('.kv-upload-progress').hide();
                utils.showNotification('上传文件失败', 3);
            });
        })
    }


5、测试功能,上传文件时,新增 POST 参数 ( type: video ) 成功实现。如图5
测试功能,上传文件时,新增 POST 参数 ( type: video ) 成功实现。
图5
6、在调整此函数时,基于单选按钮的选择,再增加一个函数参数 $type 就可以实现预期的文件类型的效果。function initUploadMediaFile(id, type, filetype) 。符合预期。如图6
在调整此函数时,基于单选按钮的选择,再增加一个函数参数 $type 就可以实现预期的文件类型的效果。function initUploadMediaFile(id, type, filetype) 。符合预期。
图6

需要长期技术维护或远程问题排查?

我是拥有 15+ 年经验的 PHP / Go 后端工程师,长期关注已有系统维护、Bug 修复、性能优化、服务器排查、WordPress 网站维护和小功能迭代。

如果你的项目遇到以下情况,可以先从一次小问题排查开始合作:

  • ✅ PHP / Laravel / Yii2 老项目无人维护
  • ✅ Go / Gin 后端接口需要排查或优化
  • ✅ WordPress 网站访问慢、报错或插件冲突
  • ✅ Nginx / MySQL / Redis / Linux 服务器异常
  • ✅ CDN / Cloudflare / DNS / HTTPS 配置问题
  • ✅ 需要长期远程技术支持或兼职维护

更多介绍请查看:关于我 & 合作

微信:13980074657
邮箱:shuijingwanwq@gmail.com
Telegram:@shuijingwan
GitHub:https://github.com/shuijingwan

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理