php多图上传插件ios,yii2组件之多图上传插件FileInput的详细使用
作者:白狼 出处: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 '图片';
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;
'options' => ['enctype'=>'multipart/form-data'],
]); ?>
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);
}",
],
]);
?>
如上所述,基本上都是组件 FileInput的基本属性和设置,我们这里也仅仅罗列了一些常用的属性介绍,如有所需,可查看文档看属性的详细说明。
按照如上所配置,我们预览下效果图
(图片见原文)
感觉上效果很是可以,在开始写php代码实现之前,我们先在controller中实现 initialPreview和 initialPreviewConfig的配置
[考虑目前国内网站大部分采集文章十分频繁,更有甚者不注明原文出处,原作者更希望看客们查看原文,以防有任何问题不能更新所有文章,避免误导!]
php多图上传插件ios,yii2组件之多图上传插件FileInput的详细使用相关推荐
- 史上最全iOS开发之第三方库整理汇总
UI 下拉刷新 EGOTableViewPullRefresh – 最早的下拉刷新控件. SVPullToRefresh – 下拉刷新控件. MJRefresh – 仅需一行代码就可以为UITable ...
- iOS:iOS开发非常全的三方库、插件、大牛博客等等
iOS开发非常全的三方库.插件.大牛博客等等 github排名:https://github.com/trending, github搜索:https://github.com/search. 此文章 ...
- Unity自定义UI组件(十一) 雷达图、属性图
前言 借用梦想世界宠物属性图 想必大家都在游戏中见过属性图用于展示多种属性的数值,可以较为直观的对比某种属性的缺陷或者是哪种属性有优势.在三维可视化领域也会遇到类似的属性对比,用属性图来展示最为合适. ...
- Vue 组件封装之 ScrollView 上拉加载更多
Vue 组件封装之 ScrollView 上拉加载更多 一.ScrollView 上拉加载更多 二.使用案例 三.API 使用指南 四.源代码 一.ScrollView 上拉加载更多 组件说明: 实现 ...
- 头像裁剪上传插件php,yii2.0 上传头像插件(可裁剪)yii2-avatar扩展包
1.yii2.0 上传头像插件包名 基于cropper的一款头像上传yii2组件 包名: composer require daimakuai/yii2-avatar 2.截图 3.yii2.0 上传 ...
- vue前端上传文件夹的插件_基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件...
1. 前言 之前公司要在管理系统中做一个全局上传插件,即切换各个页面的时候,上传界面还在并且上传不会受到影响,这在vue这种spa框架面前并不是什么难题.然而后端大佬说我们要实现分片上传.秒传以及断点 ...
- js插件+UploadFile类实现图片的批量上传
文件上传无疑是web应用中一个非常常用的功能,下面小编给大家分享一下diyUpload.js+ThinkPHP中的UploadFile类实现图片的批量上传. 首先,给大家介绍展示一下具体操作页面: h ...
- php文件 用户头像上传代码,网页web上传用户头像代码实现(美图秀秀开放)
网页web上传用户头像代码实现(美图秀秀开放) 在制作论坛或者一些门户社交网站的时候,经常要获取用户的头像.之前我们一般都是自己制作flash插件头像上传.或者用js来自己开发一个头像上传功能.比如有 ...
- iOS视频录制、压缩、上传(整理)
iOS视频录制.压缩.上传(整理) 我们在项目中有时会碰到视频相关的需求,一般的可以分为几种情况: 1. 简单的视频开发,对界面无要求,可直接使用系统UIImagePickerController. ...
最新文章
- 【经典书籍】深度强化学习实战(附最新PDF和源代码下载)
- 人工智能在物联网中的作用
- curl可以访问但httpclient不能访问_exta进程不能访问+ASM实例的解决方法
- 程序世界的秘密(中)
- 用NFS挂载root出现:NFS: failed to create MNT RPC client, status=-101(-110)
- ccflow表结构与运行机制(二次开发必读)
- 用户反馈:对 Rafy 开发框架的一些个人建议
- iPhone降价都救不回销量?苹果仍需努力!
- PostgreSQL的使用-02-在Linux下的基本配置
- 计算机一级笔试2012,2012计算机一级笔试模拟试卷及答案
- 瑞芯微和全志哪个好_瑞芯微和全志科技基本面信息简要对比和整理
- php的闭包函数bingto_php的闭包
- win7上Android环境搭建以及调试
- 使用Spider提取数据(爬取起点中文网)
- luarocks安装以及lfs安装
- 你所想了解的方正快速开发平台
- 免费H5页面制作工具大汇总
- 牵线搭桥,『桥接模式』
- 使用BUCK芯片输出翻转负电压
- wifi已通过硬件开关禁用解决办法
热门文章
- java布道师_初探第10代Java帝国:11位Java专家道出了他们最喜欢的功能
- Python 中引入多个模块,包的概念
- Python的time库的一些简单函数以及用法
- 南农计算机分数线,南京农业大学
- 计算机服务业纳税,2018年全国软件和信息技术服务业增值税、消费税、营业税等各税收收入情况(附各地区)...
- 指令发送没反应_如何判断网络故障的原因?7个指令,教你逐步排查!
- web前端入门学习 css(4)(盒子模型)
- 拉格朗日乘数法(一种寻找变量受一个或多个条件所限制的多元函数的极值的方法)
- 第十届蓝桥杯大赛软件赛省赛 C/C++ 大学B组
- Spring Boot、Spring Cloud、Spring Cloud Alibaba版本关系查询