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('图片上传失败');
}"
]
])
网友评论