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

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

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

借助一下场景,方便说明

假设我们有一张商品表,一张商品图片表,商品图片表只对商品id和图片地址进行存储

开始前准备工作

1、下载我们所需要的组件

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

2、准备一张商品表和一张商品图片表,商品图片表包括商品id和图片url即可

同步上传多图片操作

我们这里所谓的同步操作,即在添加商品时选择多张图片,然后跟随表单一同提交。来看看怎么使用的。

use kartik\file\FileInput;

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

若是要上传多图,记得选择图片的时候多选哦。

如此一来,图片选择好了直接提交表单就好,后端文件上传的程序需要自行处理,如果你还没有实现,可以参考文件上传的基本操作。需要提醒的是,以本文为例,此处我们给商品添加多图片实际是操作了两张数据表。

商品图的异步修改(包括删除\添加)操作

开篇可以看到,对于商品的banner图,我们是跟随表单一同提交而进行的上传,接着我们说一说这个麻烦事:编辑商品的时候如何展示商品图以及如何对商品图进行更新\新增\删除的操作?

首先,我们在controller中获取商品对应的banner图,在编辑商品页面展现banner图之前,我们对其稍微进行一下处理:

// 假设商品的banner图是 $relationBanners的集合, $id是商品的id
// $relationBanners的数据结构如:
/**
* Array
*(
* [0] => Array
* (
* [id] => 1484314
* [goods_id] => 1173376
* [banner] => ./uploads/20160617/146612713857635322241f2.png
* )
*
*)
*/ $relationBanners = Banner::find()->where(['goods_id' => $id])->asArray()->all(); // @param $p1 Array 需要预览的商品图,是商品图的一个集合
// @param $p2 Array 对应商品图的操作属性,我们这里包括商品图删除的地址和商品图的id
$p1 = $p2 = [];
if ($relationBanners) {
foreach ($relationBanners as $k => $v) {
$p1[$k] = $v['banner'];
$p2[$k] = [
// 要删除商品图的地址
'url' => Url::toRoute('/banner/delete'),
// 商品图对应的商品图id
'key' => $v['id'],
];
}
} return $this->render('banner', [
// other params
'p1' => $p1,
'p2' => $p2,
// 商品id
'id' => $id,
]);

视图文件View的代码可参考

// 视图文件
use kartik\file\FileInput; <?php
echo $form->field($model, 'banner[]')->label('banner图')->widget(FileInput::classname(), [
'options' => ['multiple' => true],
'pluginOptions' => [
// 需要预览的文件格式
'previewFileType' => 'image',
// 预览的文件
'initialPreview' => $p1,
// 需要展示的图片设置,比如图片的宽度等
'initialPreviewConfig' => $p2,
// 是否展示预览图
'initialPreviewAsData' => true,
// 异步上传的接口地址设置
'uploadUrl' => Url::toRoute(['/goods/async-banner']),
// 异步上传需要携带的其他参数,比如商品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的基本属性和设置,如有所需,可查看文档看属性的详细说明

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

查看原文

yii2组件之多图上传插件FileInput的详细使用的更多相关文章

  1. Vue的移动端多图上传插件vue-easy-uploader

    原文地址 前言 这段时间赶项目,需要用到多文件上传,用Vue进行前端项目开发.在网上找了不少插件,都不是十分满意,有的使用起来繁琐,有的不能适应本项目.就打算自己折腾一下,写一个Vue的上传插件,一劳 ...

  2. Bootstrap FileInput 多图上传插件 文档属性说明

    Bootstrap FileInput 多图上传插件   原文链接:http://blog.csdn.net/misterwho/article/details/72886248?utm_source ...

  3. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  4. Bootstrap 文件上传插件 FileInput的使用问题

    : 在使用bootstrap的文件上传插件fileinput http://plugins.krajee.com/file-input的预览功能时,删除预览图片在 bootstrap 模态框中没有用, ...

  5. 单独调用kindeditor的多图上传组件实现多图上传

    本例是单独调用kindeditor多图上传的组件来进行多图上传,兼容性你懂得! 官方示例地址:http://kindeditor.net/ke4/examples/multi-image-dialog ...

  6. bootsrap 上传插件fileinput 简单使用

    1.安装 下载fileinput文件,载入对应的css+js文件,如下: <link href="css/bootstrap.min.css" rel="style ...

  7. swfupload多图上传插件(ASP.NET)

    <script src="../js/swfupload/swfupload.js" type="text/javascript"></scr ...

  8. 支持多文件上传,预览,拖拽,基于bootstra的上传插件fileinput 的ajax异步上传

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...

  9. 支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput 的ajax异步上传(转载)

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...

随机推荐

  1. Tomcat服务无法启动的问题

    去年下半年公司就决定投入人力物力"跟风"做大数据方向的研究并应用到后续项目中,于是乎,我们也得熟悉下Java才行了. 先弄个JavaEE的开发环境再说吧.装JDK.JRE,其实JD ...

  2. ASP.NET MVC Model验证(五)

    ASP.NET MVC Model验证(五) 前言 上篇主要讲解ModelValidatorProvider 和ModelValidator两种类型的自定义实现, 然而在MVC框架中还给我们提供了其它 ...

  3. ASP.NET MVC Model元数据(二)

    ASP.NET MVC Model元数据(二) 前言 在上篇中,给大家留个对Model元数据的印象,并没有对Model元数据有过多的讲解,而在本篇中也不会对Model元数据的本身来解释,而是针对于它的 ...

  4. CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口

    CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口 开始 像下面这样的四个视口的功能是很常用的,所以我花了几天时间在CSharpGL中集成了这个功能. 在CSh ...

  5. 计算机程序的思维逻辑 (30) - 剖析StringBuilder

    上节介绍了String,提到如果字符串修改操作比较频繁,应该采用StringBuilder和StringBuffer类,这两个类的方法基本是完全一样的,它们的实现代码也几乎一样,唯一的不同就在于,St ...

  6. 【基于WPF+OneNote+Oracle的中文图片识别系统阶段总结】之篇二:基于OneNote难点突破和批量识别

    篇一:WPF常用知识以及本项目设计总结:http://www.cnblogs.com/baiboy/p/wpf.html 篇二:基于OneNote难点突破和批量识别:http://www.cnblog ...

  7. 1Z0-053 争议题目解析

    1Z0-053 争议题目解析 Summary 题目NO. 题目解析链接地址 题库答案 参考答案 考查知识点  24 http://www.cnblogs.com/jyzhao/p/5319220.ht ...

  8. 【分布式】Zookeeper与Paxos

    一.前言 在学习了Paxos在Chubby中的应用后,接下来学习Paxos在开源软件Zookeeper中的应用. 二.Zookeeper Zookeeper是一个开源的分布式协调服务,其设计目标是将那 ...

  9. EF 在controller 带参数跳转到新的网址

    参考文章:http://blog.csdn.net/zhensoft163/article/details/7174661 我用到了这一种方式: 跳转到同一Controller 里面的不同Action ...

  10. MSSQL练习题

    下列属于SQL Server的系统数据库是( ) A.modelB.publicC.NorthwindD.System 答案:http://hovertree.com/tiku/bjaf/06nvv7 ...