例子:

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. iptables 从一台机到另一台机端口转发

    启用网卡转发功能#echo 1 > /proc/sys/net/ipv4/ip_forward 举例:从192.168.0.132:21521(新端口)访问192.168.0.211:1521端 ...

  2. vue.js鼠标经过和离开事件 mouseover mouseout

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code @mouseover="showEwm(1)" @mouseout ...

  3. 正确生成浮点型的方法,解决sqlachemy Float浮点型的坑,生成float类型时,长度和精度均为0,导致查询不到结果!

    问题描述 在使用flask_sqlachemy时,给price字段选择了Float类型,数据库用的mysql,生成数据库表后,发现 from sqlalchemy import Float,Colum ...

  4. JS中caller和callee

    caller: caller是函数对象的一个属性,指的是这个函数对象的调用者,如果调用者,如果是顶层调用者,则返回null. 例: function func(){ console.log(func. ...

  5. Angularjs 过滤器使用

    Filter:格式化数据 // HTML表达式: {{ filter_expression | filter : expression : comparator}}   // JS表达式: $filt ...

  6. [C# ASP.NET]如何让IIS Express支持外部(局域网)连接

    声明:本文为www.cnc6.cn原创,转载时请注明出处,谢谢! 一.搭建环境: 1.系统:Win10 1809 2.IDE:Visual Studio 2017 3.Framework: 4.6.1 ...

  7. 如何用CSS3画出一个立体魔方?

    前言 最近在写<动画点点系列>文章,上一期分享了< 手把手教你如何绘制一辆会跑车 >,本期给大家带来是结合CSS3画出来的一个立体3d魔方,结合了js让你随心所欲想怎么转,就怎 ...

  8. Maven安装与环境配置(Windows)

    1.下载安装包 在Maven官网下载最新版的安装包:http://maven.apache.org/download.cgi 2.解压安装包 3.配置Maven环境变量 配置M2_HOME环境变量,指 ...

  9. C++诡异异常处理

    虽然现在C++头文件允许只编译一次,但仍然可能因为头文件引用引起问题,当出现:“构造函数初始值设定项列表只能在构造函数定义中使用”,可能的原因是头文件互相引用导致的. 出现“error LNK1120 ...

  10. 阿里云CodePipeline vs Jenkins

    产品概述_产品简介_CodePipeline-阿里云 https://help.aliyun.com/document_detail/56512.html CodePipeline管理控制台https ...