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