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

　　我写了几篇有关文件上传的文章，包括最基本的yii2文件上传，异步上传到云和百度编辑器图像上传. 看来上传多张图片并不完美.

　　今天，我将介绍一个用于上传多个图像的插件FileInput. 至于为什么我们选择TA作为我们的上传插件，这个与Yii2有联系，并且易于使用. 其次，不仅可以在添加插件时使用该插件，还可以在操作和修改过程中通过异步方式直接静默删除图片. 最值得一提的是，界面效果与Bootstrap集成在一起，令人耳目一新，简单美观，舒适.

　　在现场的帮助下，方便解释

　　假设我们有一个产品表，一个产品图片表，该产品图片表仅存储产品ID和图片地址

　　开始之前的准备工作

　　1. 下载我们需要的组件

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

　　2. 准备产品表和产品图片表. 产品图片表收录产品ID和图片网址.

　　同步上传多张图片的操作

　　此处所谓的同步操作是添加产品时选择多张图片，然后将它们与表单一起提交. 让我们看看如何使用它.

　　use kartik\file\FileInput;

// 非ActiveForm的表单

echo '图片';

echo FileInput::widget([

'model' => $model,

'attribute' => 'banner[]',

'options' => ['multiple' => true]

]);

//使用ActiveForm的表单

echo $form->field($model, 'banner[]')->widget(FileInput::classname(), [

'options' => ['multiple' => true],

]);

　　如果要上传多张图片，请记住在选择图片时选择多张图片.

　　通过这种方式，只需在选择图片后立即提交表单. 后端文件上传程序需要自己处理. 如果尚未实现，则可以参考文件上传的基本操作. 需要提醒的是，以本文为例，这里我们实际上是在操作两个数据表，以向产品中添加多个图像.

　　产品图的异步修改（包括删除\添加）操作

　　一开始，您可以看到产品的标语图像，我们将其与表单提交一起上传，然后让我们讨论这一麻烦的事情: 如何在编辑产品时显示产品图像以及如何更新产品图片\添加/删除操作？

　　首先，我们在控制器中获得与产品相对应的横幅图像. 在横幅图像显示在编辑产品页面上之前，我们将进行一些处理:

　　// 假设商品的banner图是 $relationBanners的集合, $id是商品的id

// $relationBanners的数据结构如：

/**

* Array

*(

* [0] => Array

* (

* [id] => 1484314

* [goods_id] => 1173376

* [banner] => ./uploads/20160617/146612713857635322241f2.png

* )

*

*)

*/

$relationBanners = Banner::find()->where(['goods_id' => $id])->asArray()->all();

// @param $p1 Array 需要预览的商品图，是商品图的一个集合

// @param $p2 Array 对应商品图的操作属性，我们这里包括商品图删除的地址和商品图的id

$p1 = $p2 = [];

if ($relationBanners) {

foreach ($relationBanners as $k => $v) {

$p1[$k] = $v['banner'];

$p2[$k] = [

// 要删除商品图的地址

'url' => Url::toRoute('/banner/delete'),

// 商品图对应的商品图id

'key' => $v['id'],

];

}

}

return $this->render('banner', [

// other params

'p1' => $p1,

'p2' => $p2,

// 商品id

'id' => $id,

]);

　　可以参考视图文件View的代码

　　// 视图文件

use kartik\file\FileInput;

　　如上所述，我们列出了FileInput组件的一些基本属性和设置. 如有必要，您可以检查文档.

　　[考虑到大多数国内网站都非常频繁地采集文章，并且有些网站没有指出原创文本的来源，因此原作者希望访问者可以查看原创文本，以防万一出现无法更新所有内容的问题. 文章，避免误导！ ]