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