文档章节

yii2组件之多图上传插件FileInput的详细使用

白狼栈
 白狼栈
发布于 2016/06/23 13:09
字数 1174
阅读 96
收藏 0
点赞 0
评论 0

作者:白狼 出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

文件上传也写过几篇文章了,包括最基本的yii2文件上传异步上传到又拍云以及百度编辑器图片上传的问题,貌似不说点多图上传的就不完美。

今天介绍一款多图上传的插件 FileInput,至于为什么选中了TA作为我们上传的插件,一来这货跟Yii2有一腿,用起来方便;二来嘛,用这个插件不仅添加的时候好操作,修改的时候也可以直接通过异步的方式将图片悄无声息的删掉或者新增;最值得一提的是,界面效果融合了bootstrap,清爽简洁美观,看起来舒服。

说重点,看具体步骤

首先还是先安装组件

composer require kartik-v/yii2-widget-fileinput "@dev"

先做一个必要的说明:假设我们有一张商品表,一张商品图片表,商品图片表只对商品id和图片地址进行存储

看基本使用

use kartik\file\FileInput;

// 非ActiveForm的表单
echo '<label class="control-label">图片</label>';
echo FileInput::widget([
    'model' => $model,
    'attribute' => 'image[]',
    'options' => ['multiple' => true]
]);


//使用ActiveForm的表单
echo $form->field($model, 'image[]')->widget(FileInput::classname(), [
    'options' => ['multiple' => true],
]);

上面上传多图,只需要设置multiple=true即可,记得选择图片的时候多选。

如此一来,图片选择好了直接提交表单就好,文件上传的程序需要自行处理,如果你还没有实现,可以参考文件上传的基本操作

多图上传的唯一麻烦就是,修改的时候怎么才方便?不着急,FileInput都帮我们解决了!

我们看编辑的时候图片的展示以及如何异步的删除单个或者多个图片!

// 视图文件
use kartik\file\FileInput;
<?php $form = ActiveForm::begin([
    'options' => ['enctype'=>'multipart/form-data'],
]); ?>


<?php 
echo $form->field($model, 'banner_url[]')->label('banner图')->widget(FileInput::classname(), [
    'options' => ['multiple' => true],
    'pluginOptions' => [
        // 需要预览的文件格式
        'previewFileType' => 'image',
        // 预览的文件
        'initialPreview' => ['图片1', '图片2', '图片3'],
        // 需要展示的图片设置,比如图片的宽度等
        'initialPreviewConfig' => ['width' => '120px'],
        // 是否展示预览图
        'initialPreviewAsData' => true,
        // 异步上传的接口地址设置
        'uploadUrl' => Url::toRoute(['/goods/async-image']),
        // 异步上传需要携带的其他参数,比如商品id等
        'uploadExtraData' => [
            'goods_id' => $id,
        ],
        'uploadAsync' => true,
        // 最少上传的文件个数限制
        'minFileCount' => 1,
        // 最多上传的文件个数限制
        'maxFileCount' => 10,
        // 是否显示移除按钮,指input上面的移除按钮,非具体图片上的移除按钮
        'showRemove' => true,
        // 是否显示上传按钮,指input上面的上传按钮,非具体图片上的上传按钮
        'showUpload' => true,
        //是否显示[选择]按钮,指input上面的[选择]按钮,非具体图片上的上传按钮
        'showBrowse' => true,
        // 展示图片区域是否可点击选择多文件
        'browseOnZoneClick' => true,
        // 如果要设置具体图片上的移除、上传和展示按钮,需要设置该选项
        'fileActionSettings' => [
            // 设置具体图片的查看属性为false,默认为true
            'showZoom' => false,
            // 设置具体图片的上传属性为true,默认为true
            'showUpload' => true,
            // 设置具体图片的移除属性为true,默认为true
            'showRemove' => true,
        ],
    ],
    // 一些事件行为
    'pluginEvents' => [
        // 上传成功后的回调方法,需要的可查看data后再做具体操作,一般不需要设置
        "fileuploaded" => "function (event, data, id, index) {
            console.log(data);
        }",
    ],
]);
?>
<?php ActiveForm::end(); ?>

如上所述,基本上都是组件 FileInput的基本属性和设置,我们这里也仅仅罗列了一些常用的属性介绍,如有所需,可查看文档看属性的详细说明

按照如上所配置,我们预览下效果图 (图片见原文)

感觉上效果很是可以,在开始写php代码实现之前,我们先在controller中实现 initialPreview和 initialPreviewConfig的配置

假设上面的视图文件是用户展示商品图片的详情页,当前controller是指渲染视图文件的controller,则需要在controller中获取商品关联的图片,用于展示或者说用于商品图片的删除\新增操作。

[考虑目前国内网站大部分采集文章十分频繁,更有甚者不注明原文出处,原作者更希望看客们查看原文,以防有任何问题不能更新所有文章,避免误导!]

继续阅读

© 著作权归作者所有

共有 人打赏支持
白狼栈
粉丝 17
博文 81
码字总数 30876
作品 0
杭州
PHP开发——yii2多图上传组件的使用

最近在使用yii2开发一个表单页面的时候,有多图上传的需求,稍微找了找这方面的组件,基本都安利fileInput这个组件,于是就尝试着使用这个库来完成后端表单页面的多图上传功能。使用的过程中...

Originalee
04/17
0
0
kzeng_jack/yii2-cms

Yii2 CMS 一款基于YII2框架的内容管理系统 安装 安装Yii2 CMS 通过Git安装 `bashcd /var/www/git clone https://git.oschina.net/kzeng/yii2-cms.git mysite.com` 初始化 执行 命令,然后选择...

kzeng_jack
2017/06/02
0
0
yii2 - Property 之 默认构造方法 和 setter/getter 方法

yii2 内部规定了 construct 函数的构造形式,以键值对儿数组作为参数,进行属性的初始化,但要注意给属性赋值的工作是转交给基类 yiibaseYii::configure 方法的,故无法直接访问本类的私有属...

big_cat
2016/05/27
530
0
yii2源码分析之执行基本流程

用yii2框架用了将近2年,一直都没有去看过它底层源码, 马上快不用了,最近对其源码研究一番,哈哈 废话少说,上代码, 入口文件是web/index.php

china_lx1
04/22
0
0
Yii2中关于组件的注册以及创建的方法详解

了解yii组件注册与创建的过程,并发现原来yii组件注册之后并不是马上就去创建的,而是待到实际需要使用某个组件的时候再去创建对应的组件实例的。本文大概记录一下这个探索的过程。   要了...

botkenni
06/08
0
0
Yii2.0 ActiveForm Input Fields

之前5月学习Yii2的时候发现的一个不错的博客内容,这里转载保存。 Use the namespace For ActiveForm Active Form Begin And End Text Input Field TextArea Field Password Input Field HT......

卖小女孩的小火柴
2015/06/02
0
0
yii2超好用的日期组件和时间组件

作者:白狼 出处:http://www.manks.top/yii2datetimepicker.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权...

白狼栈
2016/05/05
207
0
实用的Laravel Debug调试工具

转载请注明: 转载自Yuansir-web菜鸟 | LAMP学习笔记 本文链接地址: 实用的Laravel Debug调试工具 主要推荐laravel几个适合开发调试用的工具 1.Clockwork 首先Chrome 插件 Clockwork 安装 Co...

Yuansir
2015/01/19
0
2
这些最热门的 PHP 框架,哪一款是你的菜?

原文出处:opensource 译文出处:开源中国—两味真火 PHP 是世界上最流行的编程语言之一,广泛用于主要的项目中。例如,Facebook 就是利用 PHP 来创建和维护他们的内部系统;WordPress 内部基...

opensource
2016/12/27
0
0
安装使用yii-debug-toolbar,yii框架的调试插件

从github下载yii-debug-toolbar源码:https://github.com/malyshev/yii-debug-toolbar/downloads 2. 假设yii的项目创建在了/export/dev/yii-demo 将下载的文件解压缩到/export/dev/yii-demo/......

李佳顺
2014/04/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

云拿 无人便利店

附近(上海市-航南路)开了家无人便利店.特意进去体验了一下.下面把自己看到的跟大家分享下. 经得现场工作人员同意后拍了几张照片.从外面看是这样.店门口的指导里强调:不要一次扫码多个人进入....

周翔
12分钟前
0
0
Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
25分钟前
14
0
npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
37分钟前
0
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
42分钟前
0
0
python里求解物理学上的双弹簧质能系统

物理的模型如下: 在这个系统里有两个物体,它们的质量分别是m1和m2,被两个弹簧连接在一起,伸缩系统为k1和k2,左端固定。假定没有外力时,两个弹簧的长度为L1和L2。 由于两物体有重力,那么...

wangxuwei
57分钟前
0
0
apolloxlua 介绍

##项目介绍 apolloxlua 目前支持javascript到lua的翻译。可以在openresty和luajit里使用。这个工具分为两种模式, 一种是web模式,可以通过网页使用。另外一种是tool模式, 通常作为大规模翻...

钟元OSS
今天
0
0
Mybatis入门

简介: 定义:Mybatis是一个支持普通SQL查询、存储过程和高级映射的持久层框架。 途径:MyBatis通过XML文件或者注解的形式配置映射,实现数据库查询。 特性:动态SQL语句。 文件结构:Mybat...

霍淇滨
今天
0
0
开发技术瓶颈期,如何突破

前言 读书、学习的那些事情,以前我也陆续叨叨了不少,但总觉得 “学习方法” 就是一个永远在路上的话题。个人的能力、经验积累与习惯方法不尽相同,而且一篇文章甚至一本书都很难将学习方法...

_小迷糊
今天
0
0
安装tensorflow-XXX报错

报错: tensorflow-0.5.0-cp27-none-linux_x86_64.whl is not a supported wheel on this platform. 解决: wget https://bootstrap.pypa.io/get-pip.py sudo python2.7 get-pip.py sudo p......

Yao--靠自己
今天
0
0
JVM学习手册(一):JVM模型

一直从事JAVA开发,天天和JVM打交道,仔细想想对JVM还真的不是特别了解,实在是不应该.周六看了许多资料,也算有点心得,记录一下。 JVM内存模型分为5个区域:方法区,堆,虚拟机栈,本地方法栈,程序计...

勤奋的蚂蚁
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部