fileinput使用心得

下咋以及一些具體使用過程就不敘述了，簡單說一下使用時候需要注意的幾點

1.在js中封裝好的fileinput函數

/*
* 初始化fileInput控件（第一次初始化）
* type 不同類別
* initValue 初始化圖片值  多圖以,分割
* item_num  調用fileinput的元素
*/
function initFileInput(item_num, type, initValue) {
    var control;
    var idName;
    var uploadUrl;
    var initUrls;
    var maxFileCount;
    var initialPreviewConfig = [];

    if (initValue != undefined) {
        initUrls = initValue.split(",");
        for (var i = 0; i < initUrls.length; i++) {
            initialPreviewConfig.push({
                caption: 'default' + (i + 1) + '.jpg',
                downloadUrl: initUrls[i],
                key: i + 1
            });
        }
    }
    if (type == 0) {
        idName = "#snap_img-" + item_num;
        maxFileCount = 6;
        control = $(idName);
        uploadUrl = "http://wadev.mydaydream.com:9081/product/idea-upload";
    } else if(type == 1){
        idName = "#addImg-" + item_num;
        maxFileCount = 1;
        control = $(idName);
        uploadUrl = "http://wadev.mydaydream.com:9081/product/idea-upload";
    } else{
        idName = "#travelInput" + item_num;
        maxFileCount = 1;
        control = $(idName);
        uploadUrl = "http://wadev.mydaydream.com:9081/product/idea-upload";
    }
    var imgUrl = '';      //每一個上傳圖片的回調地址
    control.fileinput({
        initialPreview: initUrls,
        initialPreviewAsData: true,
        overwriteInitial: false,
        language: 'zh', //設置語言
        uploadUrl: uploadUrl, //上傳的地址(訪問接口地址)
        allowedFileExtensions: ['jpg', 'gif', 'png' , 'jpeg'],//接收的文件后綴
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        uploadAsync: true, //默認異步上傳
        showUpload: false, //是否顯示上傳按鈕
        showRemove: false, //顯示移除按鈕
        showPreview: true, //是否顯示預覽
        showCaption: true,//是否顯示標題
        browseClass: "btn btn-primary", //按鈕樣式
        deleteUrl: "/product/delete-image",
        dropZoneEnabled: false,//是否顯示拖拽區域
        //minImageWidth: 50, //圖片的最小
        //minImageHeight: 50,//圖片的最小高度
        //maxImageWidth: 1000,//圖片的最大寬度
        //maxImageHeight: 1000,//圖片的最大高度
        //maxFileSize: 0,//單位為kb，如果為0表示不限制文件大小
        maxFileCount: maxFileCount, //表示允許同時上傳的最大文件個數
        enctype: 'multipart/form-data',
        validateInitialCount: true,
        initialPreviewConfig: initialPreviewConfig,
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "選擇上傳的文件數量({n}) 超過允許的最大數值{m}！",
    })
        .on("filebatchselected", function (event, files) {         //默認上傳
            $(this).fileinput("upload");
        })
        .on("fileuploaded", function (event, data) {       //上傳回調事件
            imgUrl = data.response.initialUrl;
            if (type == 0) {  //對於不同類別分別進行處理
               
            } else if (type == 1) {  
               
            } else if (type == 2) { 
               
            }
        })
        .on('filesuccessremove', function (event, key) {      //刪除回調事件
            if (type == 0) {  //旅行快照
                removeSnapImage(key);
            } else if (type == 1) {  //設計理念
                removeIdeaImage(idName);
            } else if(type == 2){  //行程安排
                removeIdeaImage(idName);
            }
        })
        .on('filedeleted', function (event, key) {   //初始化圖片刪除事件
            if (type == 0) {  //對於不同類別分別進行處理
                removeSnapImage(key);
            } else if (type == 1) { 
               
            } else if(type == 2){  
               
            }
        })
    ;
}

 

2.php中調用fileinput函數

  <?php if (!$model->isNewRecord) { ?>
        <?= $form->field($model, 'poster')->label('海報')->widget(
            FileInput::className(), [
                'options' => ['multiple' => false, 'accept' => 'image/*'],
                'pluginOptions' => [
                    'initialPreview' => $postInitImage,
                    'initialPreviewAsData' => true,
                    'initialPreviewConfig' => $postInitImageCfg,
                    'previewFileType' => 'image',
                    'overwriteInitial' => true,
                    'showRemove' => true,
                    'showUpload' => false,
                    'uploadUrl' => Url::to(['poster-upload']),
                    'uploadExtraData' => [
                        'product_id' => $model->id,
                    ],
                ],
                "pluginEvents" => [  回調函數分裝在這里
                    "filebatchselected" => "function(){ $(this).fileinput(\"upload\");}"  圖片自動上傳
                ]
            ]
        ) ?>
    <?php } ?>

附上fileinput官網：http://plugins.krajee.com/file-input

php對於fileinput的使用：http://demos.krajee.com/widget-details/fileinput