Yii2上传图片插件使用
例子:
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上传图片插件使用的更多相关文章
- 如何写一个Js上传图片插件。
项目里面需要一个上传图片的插件,找了半天没有找到满意的,算了 不找了,自己写一个吧,顺便复习一下js方面的知识.完成之后效果还不错,当然还要继续优化,源码在最后. 介绍一种常见的js插件的写法 ; ( ...
- Typora-yes:typora最舒适的使用-优化主题+图床服务+自动上传图片插件
转载注明出处:https://www.cnblogs.com/nreg/p/11992678.html,谢谢 开源项目下载:https://github.com/nreg/typora-yes 云盘: ...
- jquery上传图片插件plupload
官方网站:http://plupload.com/ jquery.plupload.queue插件,是上传图片组件很强大的插件.plupload 前端根据浏览器不同选择使用Html5. Gears, ...
- yii2 开源插件与系统
yii2干货集:https://github.com/forecho/awesome-yii2 商城 samdark/yii2-shop composer global require "f ...
- ssi-uploader上传图片插件,点击选择文件按钮自动提交表单解决办法
先介绍一下这款插件,然后再谈使用中可能遇到的问题 ssi-uploader是一个JQuery的图片上传插件,界面比较美观 github地址:https://github.com/ssbeefeater ...
- 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 ...
- yii2: 上传图片,生成目录
1.单个文件上传 首先建立一个模型models/UploadForm.php,内容如下 namespace app\models; use yii\base\Model; use yii\web\Up ...
- vue封装原生的可预览裁剪上传图片插件H5,PC端都可以使用
思路:1.先做出一个上传的图片的上传区 <!-- 上传区 --> <label for="fileUp"> <div class="upBo ...
- JQuery 复制粘贴上传图片插件(textarea 和 tinyMCE)
开源地址:https://github.com/yuezhongxin/paste-upload-image.js 支持 Ctrl+C/Ctrl+V 上传,支持拖拽上传,也支持 QQ/微信截图上传. ...
随机推荐
- Y7000 (1)安装ubuntu1604遇到的问题
1安装系统 分区的时候 /boot 不再是引导分区 换成 “为系统bois保留的分区” 这个分区取代 /boot 2第一次进系统没有图形界面 在刚开机 ubuntu系统时 按e 在splash后面空 ...
- mysql备份命令
mysql备份命令如下: 备份多个数据库可以使用如下命令: mysqldump -uroot -p123456 --databases test1 test2 test3 > /home/tes ...
- <网络编程>基本TCP套接字编程
tcp提供了可靠传输,当tcp向另一端发送数据的时候,要求对端返回一个确认.如果没有接收到确认,tcp就重传数据并且等待更长时间,数次重传失败后,tcp才放弃. 建立一个tcp连接会发生如下事情: 服 ...
- [MicroPython]TurnipBit开发板DIY自动浇水系统
1.实验目的: ?学习在PC机系统中扩展简单I/O 接口的方法 ?学习TurnipBit拼插编程 ?学习土壤传感器的工作原理以及使用方法 2.所需原器件: TurnipBit一块 TurnipBit扩 ...
- 洛谷 P1605 迷宫
题目链接 https://www.luogu.org/problemnew/show/P1605 题目背景 迷宫 题目描述 给定一个N*M方格的迷宫,迷宫里有T处障碍,障碍处不可通过.给定起点坐标和 ...
- Linux并发与同步专题 (3) 信号量
关键词:Semaphore.down()/up(). <Linux并发与同步专题 (1)原子操作和内存屏障> <Linux并发与同步专题 (2)spinlock> <Li ...
- macOS10.14 Mojave无法打开和预览jpg的解决方法
分析:之所以会出现这样的问题.是因为你用了独显 而没有驱动核显导致的.想要预览正常只要用核显或者开启核显加速就OK了就可以正常预览了. 解决办法:换无核显的机型试试,比如MacPro6.1,iMac ...
- vue 中给组建绑定原生事件@click.native=""
<template> <div class="div"> //组建使用 <v-header @click.native=& ...
- SpringBoot开发案例之整合Dubbo分布式服务
前言 在 SpringBoot 很火热的时候,阿里巴巴的分布式框架 Dubbo 不知是处于什么考虑,在停更N年之后终于进行维护了.在之前的微服务中,使用的是当当维护的版本 Dubbox,整合方式也是使 ...
- 腾讯发布新版前端组件框架 Omi,全面拥抱 Web Components
Omi - 合一 下一代 Web 框架,去万物糟粕,合精华为一 → https://github.com/Tencent/omi 特性 4KB 的代码尺寸,比小更小 顺势而为,顺从浏览器的发展和 AP ...