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(); ?>
如上所述,基本上都是组件 FileInput的基本属性和设置,我们这里也仅仅罗列了一些常用的属性介绍,如有所需,可查看文档看属性的详细说明。
按照如上所配置,我们预览下效果图
感觉上效果很是可以,在开始写php代码实现之前,我们先在controller中实现 initialPreview和 initialPreviewConfig的配置
假设上面的视图文件是用户展示商品图片的详情页,当前controller是指渲染视图文件的controller,则需要在controller中获取商品关联的图片,用于展示或者说用于商品图片的删除\新增操作。
// 假设商品的图片是 $relationBanners,$id是商品的id // $relationBanners的数据结构如: /** * Array *( * [0] => Array * ( * [id] => 1484314 * [goods_id] => 1173376 * [banner_url] => ./uploads/20160617/146612713857635322241f2.png * ) * *) */ $relationBanners = Banner::find()->where(['goods_id' => $id])->asArray()->all(); // 对商品banner图进行处理 $p1 = $p2 = []; if ($relationBanners) { foreach ($relationBanners as $k => $v) { $p1[$k] = $v['banner_url']; $p2[$k] = [ 'url' => Url::toRoute('/banner/delete'), 'key' => $v['id'], ]; } } $model = new Banner; return $this->render('banner', [ 'model' => $model, 'p1' => $p1, 'p2' => $p2, 'id' => $id ]);
你可以看到p1是图片地址的集合,这里用于赋值给initialPreview
p2是一组url和key的集合,这里用于赋值给initialPreviewConfig
其中url是移除图片的请求地址
key是每个图片对应的id
此时我们视图文件中的pluginOptions应该是这样的
'pluginOptions' => [ // other code 'initialPreview' => $p1, 'initialPreviewConfig' => $p2, // other code ],
注意设置initialPreviewAsData为true哦,不然等会创建图片后,预览图不会显示。
我们在一开始配置文件中配置了uploadUrl,该参数是异步上传的图片地址。
现在看上传界面应该是光秃秃的,我们选择一张图片后效果如上图2所示,
需要提醒的是,每张小图片上的上传是上传对应的小图片,input框(右下角)的上传和移除都是针对所有的图片的操作,一张也是上传,十张也是上传,我们这里只对多图上传的操作做一个必要的说明。
图片上传的地址以及上传需要的额外参数(如商品id)我们都准备好了,额外的参数配置项是uploadExtraData,具体见上面视图文件中的配置。
接着我们看 /goods/async-image 异步上传的程序实现
public function actionAsyncImage () { // 商品ID $id = Yii::$app->request->post('goods_id'); $p1 = $p2 = []; if (empty($_FILES['Banner']['name']) || empty($_FILES['Banner']['name']['banner_url']) || !$id) { echo '{}'; return; } for ($i = 0; $i < count($_FILES['Banner']['name']['banner_url']); $i++) { $url = '/banner/delete'; $imageUrl = ''; //调用图片接口上传后返回图片地址 // 图片入库操作,此处不可以批量直接入库,因为后面我们还要把key返回 便于图片的删除 $model = new Banner; $model->goods_id = $id; $model->banner_url = $imageUrl; $key = 0; if ($model->save(false)) { $key = $model->id; } // $pathinfo = pathinfo($imageUrl); // $caption = $pathinfo['basename']; // $size = $_FILES['Banner']['size']['banner_url'][$i]; $p1[$i] = $imageUrl; $p2[$i] = ['url' => $url, 'key' => $key]; } echo json_encode([ 'initialPreview' => $p1, 'initialPreviewConfig' => $p2, 'append' => true, ]); return; }
到此,单图和多图上传的工作我们也就完成了。
为了实现图片的删除效果,这里可以先上传两张图片。你可以单张上传也可以多张上传。
上传成功后你可以刷新当前页面,因为一开始我们就在controller中实现了图片的预览工作,所以理应会展示我们已经上传的两张图片。
按照我们的配置,现在的预览图应该是这样的。
不说废话,我们看图片删除的程序(/banner/delete)实现
public function actionDelete () { if ($id = Yii::$app->request->post('key')) { $model = $this->findModel($id); $model->delete(); } Yii::$app->response->format = \yii\web\Response::FORMAT_JSON; return ['success' => true]; }
需要提醒的是,key就是我们配置 initialPreviewConfig项时指定的key,你可以参考controller中的key,也可以参考异步上传成功后p2的key.
到此,yii2中多图上传的组件使用以及程序代码我们都给出了具体的实现。
以上所述是小编给大家介绍的Yii2组件之多图上传插件FileInput的详细使用教程的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了Vue 过渡(动画)transition组件案例详解,非常不错,具有参考借鉴价值,需要的朋友参考下...2017-01-26
- 在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
- 这篇文章主要为大家详细介绍了Bootstarp创建可折叠组件的对应方法,以实例为大家分享了Bootstrap折叠组件,感兴趣的小伙伴们可以参考一下...2016-02-26
- 这篇文章主要为大家详细介绍了vue.js表格分页示例,ajax异步加载数据...2016-10-20
- 这篇文章主要介绍了基于Vue的文字跑马灯组件(npm 组件包),需要的朋友可以参考下...2017-05-27
- 列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。本文给大家介绍Bootstrap列表组组件,感兴趣的朋友一起学习吧...2016-05-05
- 这篇文章主要介绍了Bootstrap组件系列之福利篇几款好用的组件(推荐) 的相关资料,需要的朋友可以参考下...2016-06-24
- 这篇文章主要介绍了JavaScript资源预加载组件和滑屏组件的使用推荐,分别为preload和slide的用法讲解,使用起来非常简单,需要的朋友可以参考下...2016-03-12
- 这篇文章给大家介绍js组件系列之Bootstrap Icon图标选择组件,对bootstrap icon图标相关知识感兴趣的朋友一起学习吧...2016-02-01
- 这篇文章主要介绍了Yii2创建表单(ActiveForm)的方法,结合实例形式详细分析了Yii创建表单的详细步骤及相关函数与属性的使用技巧,需要的朋友可以参考下...2016-07-29
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
这篇文章主要介绍了BootStrap 图片样式、辅助类样式和CSS组件的实现代码,图文并茂介绍的非常详细,需要的朋友参考下吧...2017-01-23- 这篇文章主要介绍了PHP之深入学习Yii2缓存Cache组件详细讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下...2021-07-27
- 这篇文章主要介绍了jQuery技巧之让任何组件都支持类似DOM的事件管理 的相关资料,需要的朋友可以参考下...2016-04-06
- 带搜索功能下拉框在项目中经常会用到,下面小编把实现代码分享到脚本之家平台,供大家参考...2016-05-13
- yii2的一个强大之处之一就是他的Form组件,既方便又安全。本文给大家介绍yii2中的rules 自定义验证规则,需要的朋友参考下...2016-04-23
Yii2使用$this->context获取当前的Module、Controller(控制器)、Action等
使用Yii2的时候,在某些场景和环境下需要获得Yii2目前所处于的module(模型)、Controller(控制器)、Action(方法),以及会调用控制器里面已经定义过的一些公共的方法等.对于这些问题Yii2可以在视图层View中使用$this->context这个对象去获得。下面通过示例代码给大家讲解下...2017-04-03- 这篇文章主要介绍了YII2实现多语言配置的方法,文中YII2的版本是2.0.7,可能会与其他教程有不同,有需要的朋友可以参考借鉴,下面来一起看看吧。...2017-01-15
- 这篇文章主要介绍了Yii2实现让关联字段支持搜索功能的方法,结合实例形式分析了Yii2关联字段搜索功能的原理与相关实现技巧,需要的朋友可以参考下...2016-08-27
- 本篇文章主要介绍了Yii2框架实现数据库常用操作总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-02-18