β

kartik-v/yii2-widget-fileinput删除前询问提示事件

与您分享电脑世界 41 阅读

最近使用 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

有问题留言。

作者:与您分享电脑世界
NetPc.com.cn
原文地址:kartik-v/yii2-widget-fileinput删除前询问提示事件, 感谢原作者分享。

发表评论