例子:

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. 【window】Windows10下为PHP安装redis扩展

    操作: 步骤1:D:\wamp\bin\apache\apache2.4.9\bin/php.ini中添加 ; php_redis extension=php_igbinary.dll extensi ...

  2. 03 python 初学(字符格式化输出)

    #_author: lily #_date: 2018/12/16 name = input("your name: ") age = input("your age: ...

  3. docker 4 docker的三要素

    docker三要素 镜像,容器,仓库 镜像 docker镜像(image)就是一个只读的模板,镜像可以用来创建docker容器,一个镜像可以创建很多个容器 容器 docker利用容器(containe ...

  4. linux学习问题总结

    目录 一.环境变量和普通变量的区别 二.rsyslog和logrotate会不会丢记录的问题 三.为什么有些文件夹大小不是4096的整数倍 四.reboot和shutdown等软链接实现原理 五.sy ...

  5. RichTextbox下Hyperlink的Click无效

    原文:RichTextbox下Hyperlink的Click无效 两种方式解决: 1.<RichTextBox IsReadOnly="True" IsDocumentEna ...

  6. 移动前端webApp开发点滴积累20140524

    #webApp开发几点体会(移动前端) ##前言 本文旨在记录本人涉足移动webApp开发的几点体会,欢迎分享与指正. ##再见,IE678 移动设备,Android跟iPhone是主流,即使是win ...

  7. Paypal2017实习生-软件开发-B卷

    1. [编程|15分] Calculate survival fishes时间限制:1秒空间限制:32768K题目描述Given two zero-indexed arrays A and B con ...

  8. prime算法

    参考博客:https://blog.csdn.net/lqcsp/article/details/14118871 复杂度:O(n*n) #include <iostream> #incl ...

  9. Python学习第十一篇——for 的本质及如何正确修改列表

    假如现在有一个列表:magicians_list = ['mole','jack','lucy'],现在想通过一个函数来实现,在列表的每个元素前面加上“the Great”的字样.现在通过一个函数来实 ...

  10. 【M2】软件工程终期总结报告——前端设计总结

    PhylabWeb——前端设计感想 简介 本文的内容是关于我参与的软件工程项目——“Phylab-Web物理实验中心网站”的前端设计个人总结,来自团队:软剑攻城队 网站地址为:http://buaap ...