Yii2组件之多图上传插件FileInput的详细使用教程

在前面给大家写个有关文件上传的文章，包括最基本的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(); ?>