bootstrap-fileinput组件在上传时传递额外参数


该问题的使用场景是:在微信平台素材上传的页面使用,在上传时需要发送一个参数,让后台判断是临时素材还是永久素材。 但是该组件在一开始就已经初始化(问题所在)了要发送的参数,也就是说没有办法后期追加额外的参数。

  由于英文水平问题,阅读官方文档时没有找到该问题的解决方法,于是去github提了一个issue ,得到的答案是仔细阅读文档,里面有一个回调函数可以解决问题😍

解决方法

  关键的配置参数是uploadExtraData
  具体的代码如下:

    //获得额外参数的方法
    fodderType = function() {
            return $("#fodderTypeSelect").val();
        };
          
    //初始化fileinput控件(第一次初始化)
    function initFileInput(ctrlName, FileExtensions, fileSize) {
            var control = $('#' + ctrlName);

            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: "/WxMedia/ImageUpload", //上传的地址
                allowedFileExtensions: FileExtensions, //接收的文件后缀
                showUpload: true, //是否显示上传按钮
                showCaption: true, //是否显示标题,
                maxFileSize: fileSize * 1000, //单位为kb,如果为0表示不限制文件大小
                browseClass: "btn btn-primary", //按钮样式
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                initialCaption: "请选择上传素材",
                uploadExtraData: function(previewId, index) {   //额外参数的关键点
                    var obj = {};
                    obj.fodder = fodderType();
                    console.log(obj);
                    return obj;
                }
            });
        }

关键点:

  可以看到配置文件中uploadExtraData的参数是一个函数形式,这是一个回调函数,会在上传时调用,读取配置的额外参数。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM