This article mainly introduces the use of the yii2 multi-image upload component. It has a certain reference value. Now I share it with everyone. Friends in need can refer to it.
I recently used yii2 to develop a form page. When I had the need to upload multiple images, I searched for components in this area, and basically found the fileInput component, so I tried to use this library to complete the multi-image upload function of the back-end form page. During the use process, I found that there are still many small details that need to be paid attention to, so I recorded the use process.
yii2-widget-fileinput The github address of this library is here. The installation part is very routine. Just follow the documentation.
Let’s take a look at several common operations shown in the official documents:
use kartik\widgets\FileInput
// or 'use kartikile\FileInput' if you have only installed yii2-widget-fileinput in isolation
// 使用ActiveForm 和 model绑定的单张图片示例
echo $form->field($model, 'avatar')->widget(FileInput::classname(), [
'options' => ['accept' => 'image/*'],
]);
// 多图上传示例
echo '<label class="control-label">Add Attachments</label>';
echo FileInput::widget([
'model' => $model,
'attribute' => 'attachment_1[]',
'options' => ['multiple' => true]
]);
// 不绑定model的使用方法
echo '<label class="control-label">Upload Document</label>';
echo FileInput::widget([
'name' => 'attachment_3',
]);
// 不可点击的示例
echo '<label class="control-label">Select Attachment</label>';
echo FileInput::widget([
'name' => 'attachment_4',
'disabled' => true
]);
Copy after login
And these are common operations, let’s imagine, we To complete adding products on Taobao, there is a product table with several pictures in a one-to-many relationship. At this time, you need to use the multi-picture upload function. And we also want to upload images asynchronously, so we can configure our fileInput component like this
<?= $form->field($model, 'image[]')->label($label)->widget(FileInput::classname(), [
// 'name' => 'ImgSelect',
'language' => 'zh-CN',
'options' => ['multiple' => true, 'accept' => 'image/*'],
'pluginOptions' => [
'initialPreview' => $initialPreview,
'initialPreviewConfig' => $initialPreviewConfig,
'allowedPreviewTypes' => ['image'],
'allowedFileExtensions' => ['jpg', 'gif', 'png'],
'previewFileType' => 'image',
'overwriteInitial' => false,
'browseLabel' => '选择图片',
'msgFilesTooMany' => "选择上传的图片数量({n}) 超过允许的最大图片数{m}！",
'maxFileCount' => 5,//允许上传最多的图片5张
'maxFileSize' => 2048,//限制图片最大200kB
'uploadUrl' => Url::to(['/upload/image']),
//'uploadExtraData' => ['testid' => 'listimg'],
'uploadAsync' => true,//配置异步上传还是同步上传
],
'pluginEvents' => [
'filepredelete' => "function(event, key) {
return (!confirm('确认要删除'));
}",
'fileuploaded' => 'function(event, data, previewId, index) {
$(event.currentTarget.closest("form")).append(data.response.imgfile);
}',
'filedeleted' => 'function(event, key) {
$(event.currentTarget.closest("form")).find("#"+key).remove();
return;
}',
]
]); ?>Copy after login
We configure the image browsing configuration in the controller and pass it Come in. I have added the configuration to the key points in the code. We can see that the asynchronous upload URL has been configured in the upload/image controller, and we have also added js when deletion, upload and other operations are completed. callback.
As mentioned above, we have listed some basic properties and settings of the component FileInput. If necessary, you can check the document for detailed description of the properties.
Look at how we write the actionImage function in the controller that uploads images
/**
* 上传图片到临时目录
* @return string
* @throws \yii\base\Exception
*/
public function actionImage()
{
if (Yii::$app->request->isPost) {
$res = [];
$initialPreview = [];
$initialPreviewConfig = [];
$images = UploadedFile::getInstancesByName("UploadImage[image]");
if (count($images) > 0) {
foreach ($images as $key => $image) {
if ($image->size > 2048 * 1024) {
$res = ['error' => '图片最大不可超过2M'];
return json_encode($res);
}
if (!in_array(strtolower($image->extension), array('gif', 'jpg', 'jpeg', 'png'))) {
$res = ['error' => '请上传标准图片文件, 支持gif,jpg,png和jpeg.'];
return json_encode($res);
}
$dir = '/uploads/temp/';
//生成唯一uuid用来保存到服务器上图片名称
$pickey = ToolExtend::genuuid();
$filename = $pickey . '.' . $image->getExtension();
//如果文件夹不存在，则新建文件夹
if (!file_exists(Yii::getAlias('@backend') . '/web' . $dir)) {
FileHelper::createDirectory(Yii::getAlias('@backend') . '/web' . $dir, 777);
}
$filepath = realpath(Yii::getAlias('@backend') . '/web' . $dir) . '/';
$file = $filepath . $filename;
if ($image->saveAs($file)) {
$imgpath = $dir . $filename;
/*Image::thumbnail($file, 100, 100)
->save($file . '_100x100.jpg', ['quality' => 80]);
*/
// array_push($initialPreview, "<img src='" . $imgpath . "' class='file-preview-image' alt='" . $filename . "' title='" . $filename . "'>");
$config = [
'caption' => $filename,
'width' => '120px',
'url' => '../upload/delete', // server delete action
'key' => $pickey,
'extra' => ['filename' => $filename]
];
array_push($initialPreviewConfig, $config);
$res = [
"initialPreview" => $initialPreview,
"initialPreviewConfig" => $initialPreviewConfig,
"imgfile" => "<input name='image[]' id='" . $pickey . "' type='hidden' value='" . $imgpath . "'/>",
'filename' => $filename,
'imagePath' => $imgpath,
];
}
}
}
return json_encode($res);
}
}Copy after login
Now, the work of uploading multiple images We have achieved it perfectly.
In order to achieve the deletion effect of 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.
I won’t go into details about the deletion function. As long as you configure the deleted URL in the browser, the same operation is done.
Related recommendations:
Yii2.0 uses the Alibaba Cloud OSS SDK to upload, download, and delete images
The above is the detailed content of Use of yii2 multi-image upload component. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
