yii2组件之多图上传插件FileInput的详细使用
2016-06-23 00:00
627 查看
摘要: yii2组件之多图上传插件FileInput的详细使用
作者:白狼 出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
文件上传也写过几篇文章了,包括最基本的yii2文件上传、异步上传到又拍云以及百度编辑器图片上传的问题,貌似不说点多图上传的就不完美。
今天介绍一款多图上传的插件 FileInput,至于为什么选中了TA作为我们上传的插件,一来这货跟Yii2有一腿,用起来方便;二来嘛,用这个插件不仅添加的时候好操作,修改的时候也可以直接通过异步的方式将图片悄无声息的删掉或者新增;最值得一提的是,界面效果融合了bootstrap,清爽简洁美观,看起来舒服。
说重点,看具体步骤
首先还是先安装组件
先做一个必要的说明:假设我们有一张商品表,一张商品图片表,商品图片表只对商品id和图片地址进行存储
看基本使用
上面上传多图,只需要设置multiple=true即可,记得选择图片的时候多选。
如此一来,图片选择好了直接提交表单就好,文件上传的程序需要自行处理,如果你还没有实现,可以参考文件上传的基本操作。
多图上传的唯一麻烦就是,修改的时候怎么才方便?不着急,FileInput都帮我们解决了!
我们看编辑的时候图片的展示以及如何异步的删除单个或者多个图片!
如上所述,基本上都是组件 FileInput的基本属性和设置,我们这里也仅仅罗列了一些常用的属性介绍,如有所需,可查看文档看属性的详细说明。
按照如上所配置,我们预览下效果图
(图片见原文)
感觉上效果很是可以,在开始写php代码实现之前,我们先在controller中实现 initialPreview和 initialPreviewConfig的配置
假设上面的视图文件是用户展示商品图片的详情页,当前controller是指渲染视图文件的controller,则需要在controller中获取商品关联的图片,用于展示或者说用于商品图片的删除\新增操作。
[考虑目前国内网站大部分采集文章十分频繁,更有甚者不注明原文出处,原作者更希望看客们查看原文,以防有任何问题不能更新所有文章,避免误导!]
继续阅读
作者:白狼 出处: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中获取商品关联的图片,用于展示或者说用于商品图片的删除\新增操作。
[考虑目前国内网站大部分采集文章十分频繁,更有甚者不注明原文出处,原作者更希望看客们查看原文,以防有任何问题不能更新所有文章,避免误导!]
继续阅读
相关文章推荐
- yii2中使用Active Record模式的方法
- C#图片上传效果实例分析
- 独立图片服务器的图片上传的解决方式
- bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
- JavaScript多图片上传案例
- 图片上传之前检查大小、尺寸、格式并预览的js代码
- 基于jquery实现图片上传本地预览功能
- 使用jquery.form.js实现图片上传的方法
- 原生ajax和iframe框架实现图片文件上传的两种方式
- yii2超好用的日期组件和时间组件
- javascript 图片上传预览-兼容标准
- FCKeditor 图片上传进度条不动的解决方法
- 配置fckeditor 实现图片的上传
- jQuery实现图片上传和裁剪插件Croppie
- PHP swfupload图片上传的实例代码
- ASP.NET图片上传实例(附源码)
- yii2使用ajax返回json的实现方法
- 浅析Yii2中GridView常见操作
- 浅析Yii2集成富文本编辑器redactor实例教程