文档章节

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

白狼栈
 白狼栈
发布于 2016/06/23 13:09
字数 1174
阅读 102
收藏 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源码分析之执行基本流程

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

china_lx1
04/22
0
0
yii2 - Property 之 默认构造方法 和 setter/getter 方法

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

big_cat
2016/05/27
530
0
Yii2中关于组件的注册以及创建的方法详解

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

botkenni
06/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

cacti监控安装

cacti是用PHP实现的一个软件,它用snmp服务获取数据,然后用rrdtool存储和更新数据,并生成图表展示。比较适合用于交换机、路由器的网络监控,插件众多,可图示化显示网络状况。 cacti官方推...

hiwill
7分钟前
0
0
shell特殊符号、cut、sort、uniq、wc、tee、tr、split命令

10月15日任务 8.10 shell特殊符号cut命令 8.11 sort_wc_uniq命令 8.12 tee_tr_split命令 8.13 shell特殊符号下 cut 命令 cut作用:截取字符串 用法如下:cat /etc/passwd |head -2 |cut -d ...

hhpuppy
36分钟前
1
0
Springboot实现filter拦截token验证和跨域

背景 web验证授权合法的一般分为下面几种 1使用session作为验证合法用户访问的验证方式 使用自己实现的token 使用OCA标准 在使用API接口授权验证时,token是自定义的方式实现起来不需要引入其...

funnymin
今天
3
0
linux使用ntfs-3g操作ntfs格式硬盘

Linux内核目前只支持对微软NTFS文件系统的读取。 NTFS-3G 是微软 NTFS 文件系统的一个开源实现,同时支持读和写。NTFS-3G 开发者使用 FUSE 文件系统来辅助开发,同时对可移植性有益。 安装 ...

linuxprobe16
今天
1
0
kubeadm部署kubernetes集群

一、环境要求 这里使用RHEL7.5 master、etcd:192.168.10.101,主机名:master node1:192.168.10.103,主机名:node1 node2:192.168.10.104,主机名:node2 所有机子能基于主机名通信,编辑...

人在艹木中
今天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部