yii2图片上传组件,多图上传,图片上传预览

最新推荐文章于 2021-03-25 15:46:29 发布

原创

最新推荐文章于 2021-03-25 15:46:29 发布 · 1.5w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#yii #图片 #图片上传 #多图上传 #图片组件

本文介绍了在Yii2框架中使用fileinput插件实现多图上传和预览的步骤，详细讲解了后台上传代码和生成唯一UUID的实现方法，提供了相关组件的链接，并鼓励读者提问交流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考文章 bootstrap3 文件上传插件fileinput中文说明文档

http://blog.youkuaiyun.com/lvshaorong/article/details/48730145

由于在网上搜不到相关很全的yii2上传图片组件demo，后来还是到强大的google下面找到了相关组件。

组件地址http://demos.krajee.com/widget-details/fileinput#settings

但是只有前端，后面的上传代码没有具体的示例。所以本人结合该组件写了多图上传功能。

不说废话下面分享干货

后台上传代码

<?php

namespace frontend\controllers;

use common\ToolBox\ToolExtend;
use Yii;
use yii\helpers\FileHelper;
use yii\helpers\Html;
use yii\helpers\Url;
use yii\imagine\Image;
use yii\web\Controller;
use yii\web\UploadedFile;

class UploadController extends Controller
{
    public $enableCsrfValidation = false;//禁用Csrf验证


    /**
     * 上传图片到临时目录
     * @return string
     * @throws \yii\base\Exception
     */
    public function actionImage()
    {
        if (Yii::$app->request->isPost) {
            $res = [];
            $initialPreview = [];
            $initialPreviewConfig = [];
            $images = UploadedFile::getInstancesByName("ImgSelect");
            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用来保存到服务器上图片名称