例子:

1.在表单中:

<?php $form = \yii\widgets\ActiveForm::begin([
        'options'=>[
            'class' => 'form-horizontal',
            'enctype' => 'multipart/form-data'
        ],
        'fieldConfig' => [
            'template' => '{input}{error}',
            'options' => ['class' => 'form-field'],
        ],
    ]); ?>

注意:上传图片必须修改表单提交必须是以二进制数据流的形式;必须配置

'enctype' => 'multipart/form-data'
<?= $form->field($model, 'wms_check_certificate')->label("差异清单截图")->widget(\kartik\widgets\FileInput::className(), [
                'options' => [
                    'accept' => 'image/jpg, image/jpeg, image/png, image/gif',
                    'multiple' => false,
                ],
                'pluginOptions' => [
                    'previewFileType' => 'image',
                    'initialPreview' => !empty($model->wms_check_certificate) ? $model->wms_check_certificate : "",
                    'initialPreviewConfig'=>[],
                    'overwriteInitial'=>true,
                    'initialPreviewAsData' => true,
                    'uploadUrl' => \yii\helpers\Url::toRoute(['upload']),
                    'uploadExtraData' => ['id'=>$model->id],
                    'allowedFileExtensions' => ['jpg', 'png','gif', 'jpeg'],
                    'uploadAsync' => true,
                    'minFileCount' => 0,
                    'maxFileCount' => 1,
                    'showRemove' => true,
                    'showUpload' => true,
                    'showBrowse' => true,
                    'showPreview' => true,
                    'showCaption' => false,
                    'browseOnZoneClick' => true,
                    'fileActionSettings' => [
                        'showZoom' => true,
                        'showUpload' => true,
                        'showRemove' => true,
                    ],
                ],
                'pluginEvents' => [
                    "fileclear" => "function() { $('#wmscheck-wms_check_certificate').val(''); }",
                    "fileuploaded" => "function (event, data, id, index) {
                    console.log(data);
                  }",
                ],
            ]) ?>

注意:

'accept' => 'image/jpg, image/jpeg, image/png, image/gif', 指的是上传的文件的格式必须是jpg,png和gif
'multiple' => false,指的是不支持上传多个文件
'previewFileType' => 'image',指的是上传的文件必须是图片
'initialPreview' => !empty($model->wms_check_certificate) ? $model->wms_check_certificate : "",指的是刚进入页面时默认显示的文件
'uploadUrl' => \yii\helpers\Url::toRoute(['upload']),指的是上传文件的ur地址
'uploadExtraData' => ['id'=>$model->id],指的是上传文件时附带的数据
'allowedFileExtensions' => ['jpg', 'png','gif', 'jpeg'],指的是支持的文件后缀
'uploadAsync' => true,指的是是否以异步形式上传
'showUpload' => true,是否显示上传按钮
'showBrowse' => true,是否显示打开文件对话框按钮
'showRemove' => true,是否显示移除按钮
'showCaption' => false,是否显示方法查看按钮
  

2.在后台处理上传:

public function actionUpload(){
        $id = $_REQUEST['id'];
        if(!empty($_FILES['WmsCheck']['tmp_name']['wms_check_certificate'])){
            $wms_check_certificate = \common\models\Base::uploadCloud($_FILES['WmsCheck']['tmp_name']['wms_check_certificate'], $_FILES['WmsCheck']['name']['wms_check_certificate'], 'wms');
            $model = \core\models\WmsCheck::findOne(['id'=>$id]);
            if (empty($model)){
                echo json_encode(['msg'=>false]);
            }else{
                $model->wms_check_certificate = $wms_check_certificate;
                $save_handler = $model->save(false);
                echo json_encode(['msg'=>$save_handler]);
            }
        }else{
            echo json_encode(['msg'=>false]);
        }
    }

Yii2上传图片插件使用的更多相关文章

  1. 如何写一个Js上传图片插件。

    项目里面需要一个上传图片的插件,找了半天没有找到满意的,算了 不找了,自己写一个吧,顺便复习一下js方面的知识.完成之后效果还不错,当然还要继续优化,源码在最后. 介绍一种常见的js插件的写法 ; ( ...

  2. Typora-yes:typora最舒适的使用-优化主题+图床服务+自动上传图片插件

    转载注明出处:https://www.cnblogs.com/nreg/p/11992678.html,谢谢 开源项目下载:https://github.com/nreg/typora-yes 云盘: ...

  3. jquery上传图片插件plupload

    官方网站:http://plupload.com/ jquery.plupload.queue插件,是上传图片组件很强大的插件.plupload 前端根据浏览器不同选择使用Html5. Gears, ...

  4. yii2 开源插件与系统

    yii2干货集:https://github.com/forecho/awesome-yii2 商城 samdark/yii2-shop composer global require "f ...

  5. ssi-uploader上传图片插件,点击选择文件按钮自动提交表单解决办法

    先介绍一下这款插件,然后再谈使用中可能遇到的问题 ssi-uploader是一个JQuery的图片上传插件,界面比较美观 github地址:https://github.com/ssbeefeater ...

  6. window yii2 安装插件 报yiisoft/yii2 2.0.x-dev requires ext-mbstring错

    Problem 1 - yiisoft/yii2 2.0.x-dev requires ext-mbstring * -> the requested PHP extens ion mbstri ...

  7. yii2: 上传图片,生成目录

    1.单个文件上传 首先建立一个模型models/UploadForm.php,内容如下 namespace app\models; use yii\base\Model; use yii\web\Up ...

  8. vue封装原生的可预览裁剪上传图片插件H5,PC端都可以使用

    思路:1.先做出一个上传的图片的上传区 <!-- 上传区 --> <label for="fileUp"> <div class="upBo ...

  9. JQuery 复制粘贴上传图片插件(textarea 和 tinyMCE)

    开源地址:https://github.com/yuezhongxin/paste-upload-image.js 支持 Ctrl+C/Ctrl+V 上传,支持拖拽上传,也支持 QQ/微信截图上传. ...

随机推荐

  1. html 传递参数中文乱码 js获取参数乱码

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code HTML传递中文参数时,有乱码导致接收不到正确的数据.JS中可以使用encodeURI ...

  2. json_encode里面经常用到的 JSON_UNESCAPED_UNICODE和JSON_UNESCAPED_SLASHES

    php格式化json的函数json_encode($value,$options) 其中有2个比较常用到的参数 JSON_UNESCAPED_UNICODE(中文不转为unicode ,对应的数字 2 ...

  3. ubantu服务器配置ss

    阿里云 ubantu16.0(自带pip) 服务端 $ apt-get install python-pip $ pip install shadowsocks $ vim /etc/shadowso ...

  4. Mac OS 安装Wget

    没有Wget的日子是非常难过的,强大的Mac OS 下安装Wget非常简单 下载一个Wget的源码包,http://www.gnu.org/software/wget/ 安装与配置 1. 首先下载一个 ...

  5. 逆元-P3811 【模板】乘法逆元-洛谷luogu

    https://www.cnblogs.com/zjp-shadow/p/7773566.html -------------------------------------------------- ...

  6. # 20175329 2018-2019-2 《Java程序设计》第二周学习总结

    # 学号 2018-2019-3<Java程序设计>第三周学习总结 ## 教材学习内容总结 第二三章与我们所学习的C语言有很多的相似点,在这里我想主要就以我所学习的效果来讨论一下JAVA与 ...

  7. Java技术——Java中的static关键字解析

    )非静态内部类能够访问外部类的静态和非静态成员,显然一个非静态内部类不能脱离外部类实体被创建,而静态类不能访问外部类的非静态成员,它只能访问外部类的静态成员.这一点和上面static方法的性质类似. ...

  8. 反射那些基础-Class

    目录 1 Class 类是什么? 2 如何获取 Class 对象 2.1 Object.getClass() 2.2 .class 语法 2.3 Class.forName() 2.4 通过包装类的 ...

  9. 反射那点基础-Method

    目录 1 获取 Method 1.1 方法 1.2 实例 2 Method 的方法 2.1 Java 方法基础知识 2.2 修饰符相关方法 2.2.1 获取修饰符 2.2.2 判断是否为 defaul ...

  10. Item 25: 对右值引用使用std::move,对universal引用则使用std::forward

    本文翻译自<effective modern C++>,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 右值引用只能绑定那些有资格被move的对象上去.如 ...