Detailed usage tutorial of Yii2 component multi-image upload plug-in FileInput, yii2fileinput

Detailed usage tutorial of Yii2 component multi-image upload plug-in FileInput, yii2fileinput

I will write an article about file upload in front of you, including the most basic yii2 file upload and asynchronous There are problems with uploading images to Youpaiyun and Baidu Editor. It seems that the uploading of multiple images is not perfect without mentioning the problem.

Today we introduce FileInput, a multi-image upload plug-in. As for why we chose TA as our upload plug-in, firstly, this product has something to do with Yii2 and is easy to use; secondly, using this plug-in is not only good when adding When operating and modifying, you can also directly delete pictures silently in an asynchronous manner; the most noteworthy thing is that the interface effect incorporates bootstrap, which is refreshing, concise, beautiful, and comfortable to look at.

Tell the key points and look at the specific steps

First, install the components

Copy code The code is as follows:
composer require kartik-v/yii2-widget-fileinput "@dev"

First make a necessary explanation: Suppose we have a product table and a product image table. The product image table only stores the product id and image address

See basic usage

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],
]);

To upload multiple images above, just set multiple=true. Remember to select multiple images when selecting images.

In this way, just submit the form directly after selecting the image. The file upload procedure needs to be handled by yourself. If you have not implemented it yet, you can refer to the basic operation of file upload.

The only trouble with uploading multiple pictures is how to make it convenient when modifying? Don’t worry, FileInput has solved it for us!

Let’s look at how images are displayed during editing and how to delete single or multiple images asynchronously!

// 视图文件
use kartik\file\FileInput;
<&#63;php $form = ActiveForm::begin([
'options' => ['enctype'=>'multipart/form-data'],
]); &#63;>
<&#63;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);
}",
],
]);
&#63;>
<&#63;php ActiveForm::end(); &#63;>

As mentioned above, they are basically the basic properties and settings of the component FileInput. We only list some commonly used properties here. If necessary, you can check the document for detailed descriptions of properties.

According to the above configuration, let’s preview the effect picture

It feels like the effect is very good. Before starting to write the PHP code to implement, we first implement the configuration of initialPreview and initialPreviewConfig in the controller

Assuming that the above view file is a detail page where users display product images, and the current controller refers to the controller that renders the view file, you need to obtain the image associated with the product in the controller for display or deletion of the product image. Add operations.

// 假设商品的图片是 $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
]);

You can see that p1 is a collection of image addresses, which is used to assign to initialPreview

p2 is a set of urls and keys, which is used to assign values ​​to initialPreviewConfig

Where url is the request address to remove the image

key is the id corresponding to each image

At this point the pluginOptions in our view file should look like this

'pluginOptions' => [
// other code
'initialPreview' => $p1,
'initialPreviewConfig' => $p2,
// other code
],

Be careful to set initialPreviewAsData to true, otherwise the preview will not be displayed after the image is created.

We configured uploadUrl in the initial configuration file. This parameter is the asynchronously uploaded image address.

Now the upload interface should be bare. After we select a picture, the effect is as shown in Figure 2 above,

It should be reminded that the upload on each small picture is to upload the corresponding small picture. The upload and removal of the input box (lower right corner) are operations for all pictures. One is uploaded, and ten are uploaded. Upload, here we only provide a necessary explanation for the operation of uploading multiple images.

We have prepared the image upload address and additional parameters required for uploading (such as product ID). The additional parameter configuration item is uploadExtraData. For details, see the configuration in the view file above.

Then let’s look at the program implementation of /goods/async-image asynchronous upload

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;
}

At this point, we have completed the work of uploading single images and multiple images.

In order to achieve the effect of deleting pictures, you can upload two pictures first. You can upload a single image or multiple images.

After the upload is successful, you can refresh the current page. Because we have implemented the image preview in the controller from the beginning, the two images we have uploaded should be displayed.

According to our configuration, the current preview should look like this.

Without talking nonsense, let’s look at the implementation of the image deletion program (/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];
}

It should be reminded that the key is the key specified when we configure the initialPreviewConfig item. You can refer to the key in the controller or the key of p2 after the asynchronous upload is successful.

At this point, we have given the specific implementation of the component usage and program code for multi-image upload in yii2.

The above is the entire description of the detailed usage tutorial of the Yii2 component multi-image upload plug-in FileInput introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will promptly Reply to everyone. I would also like to thank you all for your support of the Bangkejia website!