最近使用kartik-v/yii2-widget-fileinput结合yii2做项目来实现单图、多图上传图片,异步同步删除图片还是不错的,带预览功能。找了半天网上都没有,应该很少人用吧,最后发现官网有文档。下面红色部分代码处理:
<?php $form = ActiveForm::begin(["options" => ["enctype" => "multipart/form-data"]]); ?>
<?php
echo $form->field($comment_image_model, 'image[]')->label('点评图')->widget(FileInput::classname(), [
'options' => ['multiple' => true],
'pluginOptions' => [
// 需要预览的文件格式
'previewFileType' => 'image',
// 预览的文件
'initialPreview' => $p1,
// 需要展示的图片设置,比如图片的宽度等
'initialPreviewConfig' => $p2,
// 是否展示预览图
'initialPreviewAsData' => true,
//是否重写初始化的图片
'overwriteInitial'=>false,
// 异步上传的接口地址设置
'uploadUrl' => Url::toRoute(['image-upload']),
// 异步上传需要携带的其他参数,比如商品id等
'uploadExtraData' => [
'goods_id' => $id,
],
'uploadAsync' => true,
// 最少上传的文件个数限制
'minFileCount' => 1,
// 最多上传的文件个数限制
'maxFileCount' => 10,
// 是否显示移除按钮,指input上面的移除按钮,非具体图片上的移除按钮
'showRemove' => false,
// 是否显示上传按钮,指input上面的上传按钮,非具体图片上的上传按钮
'showUpload' => true,
//是否显示[选择]按钮,指input上面的[选择]按钮,非具体图片上的上传按钮
'showBrowse' => true,
// 展示图片区域是否可点击选择多文件
'browseOnZoneClick' => true,
// 如果要设置具体图片上的移除、上传和展示按钮,需要设置该选项
'fileActionSettings' => [
// 设置具体图片的查看属性为false,默认为true
'showZoom' => true,
// 设置具体图片的上传属性为true,默认为true
'showUpload' => true,
// 设置具体图片的移除属性为true,默认为true
'showRemove' => true,
],
],
// 一些事件行为
'pluginEvents' => [
// 上传成功后的回调方法,需要的可查看data后再做具体操作,一般不需要设置
"fileuploaded" => "function (event, data, id, index) {
console.log(data);
}",
"filebeforedelete" => "function (event, data, id, index) {//找了半天 官网有文档 应该很少人用
var aborted = !window.confirm('你确定要删除该图片吗?');
if (aborted) {
//window.alert('File deletion was aborted! ');
};
return aborted;
}",
],
]);
?>
附带官网地址
事件说明
http://plugins.krajee.com/file-input/plugin-events#filebeforedelete
事件演示
http://plugins.krajee.com/file-plugin-methods-demo#delete-validation-1
http://plugins.krajee.com/file-plugin-methods-demo#delete-validation-2
有问题留言。