一、使用场景
像会员等级、商品品牌等一些情况均需要上传图片、Logo等,这时就需要用到图片上传,产品中封装了图片上传的控件,分为Ajax上传和普通的Form表单上传,这篇文章介绍如何进行普通的Form表单上传。
二、使用方式
0.页面引入图片预览的JS控件
{script src='@static/js/pic/imgPreview.js'}
1.Form表单中添加上传控件:
{input type='file-image' model=$model field='brand_logo' data-image="{imageurl}/{$model->brand_logo}" data-file="brandmodel-brand_logo"}
参数说明:
type:file-image 表示上传图片
model:表单的模型对象
field:模型中的属性
data-image:图片的url地址,如果图片已经存在,则鼠标悬浮上后会有预览图片的效果,点击图片可以查看大图,{imageurl}代表图片服务器的地址,通过{$model->brand_logo}获取图片的相对地址,拼接后即是完整的图片地址,如果图片地址仅仅是{imageurl}或者{imageurl}/ 那么程序将认为图片地址为空,鼠标悬浮上会看到默认的图片。
data-file:此属性指向用户点击上传图片的file控件的id,一般为当前控件的id,如果id为model+field自动生成的,则id符合YII的getInputId()格式
2.指定model类中添加attributeFiles函数,指定哪些属性为文件类型
/** * @inheritdoc */ public function attributeFiles () { return [ 'brand_logo' ]; }
这样,common\base\Model在model->load()的时候会自动识别出文件属性,并试图通过UploadFile::getInstance()函数获取文件,Model中加载文件的代码如下(仅对Post提交有效):
/**
* 如果data为空则加载request中的post数据
*
* @param unknown $data
* @param unknown $formName
*/
public function loadPost ($data = null, $formName = null)
{
if($data == null)
{
$data = Yii::$app->request->post();
$scope = $formName === null ? $this->formName() : $formName;
// 如果有属性为文件类型则自动加载
foreach($this->attributeFiles() as $key => $attribute)
{
// 如果$key为$this的一个属性,则表示将$attribute复制给$key
$this->$attribute = UploadedFile::getInstance($this, $attribute);
// 从提交的数据中清除,以免后面的load时被覆盖掉
if($scope === '' && ! empty($data))
{
unset($data[$attribute]);
}
elseif(isset($data[$scope]))
{
unset($data[$scope][$attribute]);
}
}
}
return parent::load($data, $formName);
}
3.为文件设置前后台的验证规则,并设置场景,一般情况下建议图片“添加”的时候为必填项,更新的时候为非必填项,如果为空则跳过,不为空则更新。
// imagerules()可以获取图片尺寸配置,需要在common/config/params-imagerules.php中进行配置 $rules[] = Model::addRule('brand_logo', 'image', array_merge(imagerules('brand_logo'), [ // 更新下 'on' => self::SCENARIO_UPDATE, // 为空时不校验 'skipOnEmpty' => true ])); // imagerules()可以获取图片尺寸配置,需要在common/config/params-imagerules.php中进行配置 $rules[] = Model::addRule('brand_logo', 'image', array_merge(imagerules('brand_logo'), [ // 更新下 'on' => self::SCENARIO_CREATE ]));
imagerules()函数的主要目的是为了统一维护图片的尺寸和验证规则,便于将来前台模板修改时,在不 修改代码的前提下仅仅通过修改配置文件即可达到修改验证规则的目的,如果有特殊情况可以自定义。
4.在控制器中编写上传图片的代码:
例如更新的时候:
if($this->request->isPost) { // 保留原来的数据 $brand_logo = $model->brand_logo; // 判断是否POST数据据,验证数据是否合法 if($model->load() && $model->validate()) { if($model->brand_logo != null) { $dir = format('/brandlogos/{0,date,yyyy/MM/dd/}', [ time() ]); $model->brand_logo->saveAs('@imagepath' . $dir); $model->brand_logo = $dir . $model->brand_logo->filename; } else { $model->brand_logo = $brand_logo; } try { $result = $model->update();
5.完成。
图片没有时,鼠标悬浮上后显示的默认图片
图片存在时或者用户选择图片后显示的选择图片(Html5预览图片)
用户点击图片显示大图
相关推荐
使用基于插件的jQuery for Yii2的拖放表单生成器。 安装 安装此扩展的首选方法是通过 。 无论运行 composer.phar require meysampg/yii2-formbuilder "*" 或添加 "meysampg/yii2-formbuilder": "*" 到composer....
主要介绍了Yii框架form表单用法,实例分析了Yii中form表单的实现方法与相关技巧,非常具有实用价值,需要的朋友可以参考下
composer require elisdn/yii2-composite-form 用法样本 创建用于SEO信息的任何简单表单模型: class MetaForm extends Model { public $ title ; public $ description ; public $ keywords ; public ...
一个Yii2插件,用于使用yii\widgets\ActiveForm和\yii\db\ActiveRecord创建步进式表单或表单向导,它使用来创建使用3个内置和3个其他主题的表单界面,此外,您还可以创建自己的表单也有自己的定制主题。 注意:它...
Yii2的FormBuilder模块 产品特点 生成表格,调查,民意调查,问卷(FormBuilder类) 拖放-排序,编辑和删除项目 AJAX的CRUD操作 内置RBAC组件 表单渲染小部件(Form类) 验证表格(动态模型) 从数据库中的表单...
yii2用表单上传文件经常用到的,该怎样上传呢? 1、单个文件上传 首先建立一个模型models/UploadForm.php,内容如下 namespace app\models; use yii\base\Model; use yii\web\UploadedFile; /** * UploadForm is ...
形式\kartik\builder\Form 表单构建器小部件允许您通过配置数组构建表单。 可用的主要功能: 从扩展yii\base\model或yii\db\ActiveRecord的模型中配置表单字段。 能够支持各种Bootstrap 3.x表单布局。 使用高级 。 ...
按Yii文档里的描述,Yii在处理表单的一般过程是: 创建表单对应的模型类,设置字段验证规则创建表单提交对应的action,处理提交的内容在视图中创建表单form在刚刚的一个小项目里,想使用ajax提交表单信息并验证保存...
在 yii2 上下文中还没有可用于 twig 的模板,所以这应该为那些想要使用 twig 的人节省大量时间:) 这意味着表单不会是这样的: <?php $form = ActiveForm::begin(['id' => 'contact-form']); ?> <?= $form-...
本文实例讲述了Yii框架表单提交验证功能。分享给大家供大家参考,具体如下: 一、前端提交的三种方式 前面已经提出,表单提交一共只有三种方式。 1. 前端原生html (1)原生html标签 首先,直接使用html标签的input,...
很多时候,需要对Yii表单model中的对象设置的rules进行判断,但是有的时候可能需要在提交之前就在客户端进行验证。...接下来通过本文给大家分享yii form 表单提交之前JS在提交按钮的验证方法,需要的的朋友参考下
Yii2中对于表单和字段的支持组件为ActiveForm和ActiveField, 要生成一个具有label、input、error提示这样通用格式的登录框,可编写如下代码: <?php $form = ActiveForm::begin([ 'id' => 'login-form', '...
本文实例讲述了yii用户注册表单验证实现方法。分享给大家供大家参考,具体如下: 视图层:register.php <?php //使用小物件生成form元素 $form=$this->beginWidget('CActiveForm'); ?> <!--用户名--> &...
本文实例讲述了Yii2创建表单(ActiveForm)的方法。分享给大家供大家参考,具体如下: 由于表单涉及到一些验证方面的信息,属性设置又比较多、比较复杂,所以哪里有什么不正确的地方请留言指点 目录 表单的生成 表单中...
本文实例讲述了Yii2框架自定义验证规则操作。... * 验证提交的form表单 * * @return array */ public function rules() { return [ // 自定义验证 [['aaa', 'bbb', 'ccc'], 'customValidationCityCode'],
本文实例讲述了YII2.0之Activeform表单组件用法。分享给大家供大家参考,具体如下: Activeform 文本框:textInput(); 密码框:passwordInput(); 单选框:radio(),radioList(); 复选框:checkbox(),checkboxList(); ...
yii2的一个强大之处之一就是他的Form组件,既方便又安全。有些小伙伴感觉用yii一段时间了,好嘛,除了比tp”难懂”好像啥都没有。 领导安排搞一个注册的功能,这家伙刷刷刷的又是百度啥啥啥好的表单样式,又是百度...