krajee Bootstrap File Input文件上传插

echo FileInput::widget([
        'name' => 'files',
        'options' => ['multiple' => true],
        'pluginOptions' => [
                'allowedFileExtensions' => ['jpg', 'png','gif', 'jpeg', 'pdf'],
                        // 异步上传的接口地址设置
                        'uploadUrl' => '?r=rewards/upload',//\yii\helpers\Url::to(['asyncphoto']),
                        //插件指定有初始文件时的删除ajax请求地址，注意：新上传的文件点击删除不会请求
                        'deleteUrl' => '?r=rewards/delupload',
                        'uploadAsync' => true,
                        // 异步上传需要携带的其他参数，比如商品id等,可选
                        'uploadExtraData' => [
                            //'upload_no' => $uploadNo,
                        ],
                        //删除文件时post的其他数据
                        "deleteExtraData" => [
                            "id" => $model->id,
                        ],
                        //'maxFileSize' => 1024 * 30 ,
                        'initialPreview' =>['1.jpg','2.jpg'],//初始化显示的文件地址数组
                        //初始化显示文件的配置，具体查看官网https://plugins.krajee.com/file-input/plugin-options#initialPreviewConfig
                        'initialPreviewConfig' =>[
                          [
                        'key' => $key,
                        'caption' => "$value",
                        "type" => strtolower(end(explode('.', $key)))=='pdf'?"pdf":"image",
                        'size' => filesize("uploads/$key"),
                        "frameAttr" => ["data-vv" => $key,'id' => "{$key}_{$value}"],
                          ],
                        ],
                        // 需要预览的文件格式
                        'initialPreviewFileType' => 'image',
                        'initialPreviewAsData' => true,//开启初始化文件预览？
                        'overwriteInitial'  => false,//新选择文件后，是否删掉初始化的文件
                        'previewFileType' => ['image','pdf'],
                        //是否显示文件名
                        'showCaption' => true,
                        // 预览的文件
                        //'initialPreview' => isset($p1) ? $p1 : '',
                        // 需要展示的图片设置，比如图片的宽度等
                        //'initialPreviewConfig' => isset($p2) ? $p2 : '',
                        // 是否展示预览图
                        //'initialPreviewAsData' => true,
                        // 最少上传的文件个数限制
                        'minFileCount' => 1,
                        // 最多上传的文件个数限制,需要配置`'multiple'=>true`才生效
                        'maxFileCount' => 50,
                        // 是否显示移除按钮，指input上面的移除按钮，非具体图片上的移除按钮
                        'showRemove' => true,
                        // 是否显示上传按钮，指input上面的上传按钮，非具体图片上的上传按钮
                        'showUpload' => true,
                        //是否显示[选择]按钮,指input上面的[选择]按钮,非具体图片上的上传按钮
                        'showBrowse' => true,
                        // 展示图片区域是否可点击选择多文件
                        'browseOnZoneClick' => true,
                        // 如果要设置具体图片上的移除、上传和展示按钮，需要设置该选项
                        'fileActionSettings' => [
                            // 设置具体图片的查看属性为false,默认为true
                            'showZoom' => false,
                            // 设置具体图片的上传属性为true,默认为true
                            'showUpload' => false,
                            // 设置具体图片的移除属性为true,默认为true
                            'showRemove' => true,
                        ],
        ],
        'pluginEvents' => [                     
                        'fileuploaded' => "function (e,data,id,index){                          
                            //files[id] = data.response.url;
                            //console.log($(document.getElementById(id)));
                            document.getElementById(id).setAttribute('data-vv',data.response.url);                          
                            var ff1 = $('.file-preview-frame');
                            var ff2 = $('[data-vv]');
                            if(ff1.length == ff2.length){
                                $('#myModal').modal('hide')
                            }
                        }", 
                        'filepredelete' => "function(event, key, jqXHR, data){
                            return !confirm('确认删除该文件吗？文件删除后不可恢复！');
                        }",                                         
                        //错误的冗余机制
                        'error' => "function (){
                            alert('图片上传失败');
                        }"
       ]
    ])