例子:

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. Spring MVC Content Negotiation 转载

    Spring MVC Content Negotiation 2017年11月15日 00:21:21 carl-zhao 阅读数:2983   Spring MVC有两种方式生成output的方法: ...

  2. PAT A1094 The Largest Generation (25 分)——树的bfs遍历

    A family hierarchy is usually presented by a pedigree tree where all the nodes on the same level bel ...

  3. C语言中__attribute__ ((at())绝对定位的应用

    C语言中的关键字__attribute__ ,当时大一学C语言中没有接触过,后来工作中搞RFID的蓝牙标签卡开发,用的是MSP430G2332,直接用的是绝对定位: 1 const uint8_t f ...

  4. RPC与Zookeeper注册中心的简单实现

    连接上文:https://www.cnblogs.com/wuzhenzhao/p/9962250.html RPC框架的简单实现,基于这个小程序,在我学习完Zookeeper之后如何将注册中心与RP ...

  5. Spring集成Quarz开发环境搭建

    第一步,搭建Spring相关的环境,参照:http://www.cnblogs.com/dyh004/p/4645572.html 第二步,下载Quartz相关的压缩文件,解压,下载地址:http:/ ...

  6. Mysql启动找不到mysql.sock文件问题(Centos7)

    刚装完Mysql5.7,将Mysql添加到开机自启.reboot之后mysql服务却没启动起来, 直接输入mysql –uroot –p ,出现如下错误,找不到mysql.sock文件.用servic ...

  7. Java 自动装箱与拆箱(Autoboxing and unboxing)

    什么是自动装箱拆箱 基本数据类型的自动装箱(autoboxing).拆箱(unboxing)是自J2SE 5.0开始提供的功能. 一般我们要创建一个类的对象实例的时候,我们会这样: Class a = ...

  8. H5 颜色属性

    07-颜色属性 我是段落 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  9. Linux安装Apache常见报错(二)

    配置Apache提示报错configure error: APR could not be located. Please use the --with-apr option. 解决办法: ./con ...

  10. Magic Stones CodeForces - 1110E (思维+差分)

    E. Magic Stones time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...