yii2组件之多图上传插件FileInput的详细使用

做者：白狼 出处：http://www.manks.top/yii2_multiply_images.html 本文版权归做者，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出原文链接，不然保留追究法律责任的权利。

文件上传也写过几篇文章了，包括最基本的yii2文件上传、异步上传到又拍云以及百度编辑器图片上传的问题，貌似不说点多图上传的就不完美。

今天介绍一款多图上传的插件 FileInput，至于为何选中了TA做为咱们上传的插件，一来这货跟Yii2有一腿，用起来方便；二来嘛，用这个插件不只添加的时候好操做，修改的时候也能够直接经过异步的方式将图片悄无声息的删掉或者新增；最值得一提的是，界面效果融合了bootstrap，清爽简洁美观，看起来舒服。

说重点，看具体步骤

首先仍是先安装组件

composer require kartik-v/yii2-widget-fileinput "@dev"

先作一个必要的说明：假设咱们有一张商品表，一张商品图片表，商品图片表只对商品id和图片地址进行存储

看基本使用

use kartik\file\FileInput;

// 非ActiveForm的表单
echo '<label class="control-label">图片</label>';
echo FileInput::widget([
    'model' => $model,
    'attribute' => 'image[]',
    'options' => ['multiple' => true]
]);


//使用ActiveForm的表单
echo $form->field($model, 'image[]')->widget(FileInput::classname(), [
    'options' => ['multiple' => true],
]);

上面上传多图，只须要设置multiple=true便可，记得选择图片的时候多选。

如此一来，图片选择好了直接提交表单就好，文件上传的程序须要自行处理，若是你尚未实现，能够参考文件上传的基本操做。

多图上传的惟一麻烦就是，修改的时候怎么才方便？不着急，FileInput都帮咱们解决了！

咱们看编辑的时候图片的展现以及如何异步的删除单个或者多个图片！

// 视图文件
use kartik\file\FileInput;
<?php $form = ActiveForm::begin([
    'options' => ['enctype'=>'multipart/form-data'],
]); ?>


<?php 
echo $form->field($model, 'banner_url[]')->label('banner图')->widget(FileInput::classname(), [
    'options' => ['multiple' => true],
    'pluginOptions' => [
        // 须要预览的文件格式
        'previewFileType' => 'image',
        // 预览的文件
        'initialPreview' => ['图片1', '图片2', '图片3'],
        // 须要展现的图片设置，好比图片的宽度等
        'initialPreviewConfig' => ['width' => '120px'],
        // 是否展现预览图
        'initialPreviewAsData' => true,
        // 异步上传的接口地址设置
        'uploadUrl' => Url::toRoute(['/goods/async-image']),
        // 异步上传须要携带的其余参数，好比商品id等
        'uploadExtraData' => [
            'goods_id' => $id,
        ],
        'uploadAsync' => true,
        // 最少上传的文件个数限制
        'minFileCount' => 1,
        // 最多上传的文件个数限制
        'maxFileCount' => 10,
        // 是否显示移除按钮，指input上面的移除按钮，非具体图片上的移除按钮
        'showRemove' => true,
        // 是否显示上传按钮，指input上面的上传按钮，非具体图片上的上传按钮
        'showUpload' => true,
        //是否显示[选择]按钮,指input上面的[选择]按钮,非具体图片上的上传按钮
        'showBrowse' => true,
        // 展现图片区域是否可点击选择多文件
        'browseOnZoneClick' => true,
        // 若是要设置具体图片上的移除、上传和展现按钮，须要设置该选项
        'fileActionSettings' => [
            // 设置具体图片的查看属性为false,默认为true
            'showZoom' => false,
            // 设置具体图片的上传属性为true,默认为true
            'showUpload' => true,
            // 设置具体图片的移除属性为true,默认为true
            'showRemove' => true,
        ],
    ],
    // 一些事件行为
    'pluginEvents' => [
        // 上传成功后的回调方法，须要的可查看data后再作具体操做，通常不须要设置
        "fileuploaded" => "function (event, data, id, index) {
            console.log(data);
        }",
    ],
]);
?>
<?php ActiveForm::end(); ?>

如上所述，基本上都是组件 FileInput的基本属性和设置，咱们这里也仅仅罗列了一些经常使用的属性介绍，若有所需，可查看文档看属性的详细说明。

按照如上所配置，咱们预览下效果图 （图片见原文）

感受上效果非常能够，在开始写php代码实现以前，咱们先在controller中实现 initialPreview和 initialPreviewConfig的配置

假设上面的视图文件是用户展现商品图片的详情页，当前controller是指渲染视图文件的controller，则须要在controller中获取商品关联的图片，用于展现或者说用于商品图片的删除\新增操做。

[考虑目前国内网站大部分采集文章十分频繁，更有甚者不注明原文出处，原做者更但愿看客们查看原文，以防有任何问题不能更新全部文章，避免误导！]

继续阅读