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' => [
// 需要預(yù)覽的文件格式
'previewFileType' => 'image',
// 預(yù)覽的文件
'initialPreview' => ['圖片1', '圖片2', '圖片3'],
// 需要展示的圖片設(shè)置，比如圖片的寬度等
'initialPreviewConfig' => ['width' => '120px'],
// 是否展示預(yù)覽圖
'initialPreviewAsData' => true,
// 異步上傳的接口地址設(shè)置
'uploadUrl' => Url::toRoute(['/goods/async-image']),
// 異步上傳需要攜帶的其他參數(shù)，比如商品id等
'uploadExtraData' => [
'goods_id' => $id,
],
'uploadAsync' => true,
// 最少上傳的文件個(gè)數(shù)限制
'minFileCount' => 1,
// 最多上傳的文件個(gè)數(shù)限制
'maxFileCount' => 10,
// 是否顯示移除按鈕，指input上面的移除按鈕，非具體圖片上的移除按鈕
'showRemove' => true,
// 是否顯示上傳按鈕，指input上面的上傳按鈕，非具體圖片上的上傳按鈕
'showUpload' => true,
//是否顯示[選擇]按鈕,指input上面的[選擇]按鈕,非具體圖片上的上傳按鈕
'showBrowse' => true,
// 展示圖片區(qū)域是否可點(diǎn)擊選擇多文件
'browseOnZoneClick' => true,
// 如果要設(shè)置具體圖片上的移除、上傳和展示按鈕，需要設(shè)置該選項(xiàng)
'fileActionSettings' => [
// 設(shè)置具體圖片的查看屬性為false,默認(rèn)為true
'showZoom' => false,
// 設(shè)置具體圖片的上傳屬性為true,默認(rèn)為true
'showUpload' => true,
// 設(shè)置具體圖片的移除屬性為true,默認(rèn)為true
'showRemove' => true,
],
],
// 一些事件行為
'pluginEvents' => [
// 上傳成功后的回調(diào)方法，需要的可查看data后再做具體操作，一般不需要設(shè)置
"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.

// 假設(shè)商品的圖片是 $relationBanners,$id是商品的id
// $relationBanners的數(shù)據(jù)結(jié)構(gòu)如：
/**
* Array
*(
* [0] => Array
* (
* [id] => 1484314
* [goods_id] => 1173376
* [banner_url] => ./uploads/20160617/146612713857635322241f2.png
* )
*
*)
*/
$relationBanners = Banner::find()->where(['goods_id' => $id])->asArray()->all();
// 對(duì)商品banner圖進(jìn)行處理
$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 = ''; //調(diào)用圖片接口上傳后返回圖片地址
// 圖片入庫(kù)操作，此處不可以批量直接入庫(kù)，因?yàn)楹竺嫖覀冞€要把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!