yii2多图上传组件的使用教程


Posted in PHP onMay 10, 2018

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

yii2-widget-fileinput 这个库的github地址在这里,安装的部分就很常规了,按文档走就可以了。

我们来看官方文档展示的几个常规操作:

use kartik\widgets\FileInput
// or 'use kartikile\FileInput' if you have only installed yii2-widget-fileinput in isolation
// 使用ActiveForm 和 model绑定的单张图片示例
echo $form->field($model, 'avatar')->widget(FileInput::classname(), [
  'options' => ['accept' => 'image/*'],
]);
// 多图上传示例
echo '<label class="control-label">Add Attachments</label>';
echo FileInput::widget([
  'model' => $model,
  'attribute' => 'attachment_1[]',
  'options' => ['multiple' => true]
]);
// 不绑定model的使用方法
echo '<label class="control-label">Upload Document</label>';
echo FileInput::widget([
  'name' => 'attachment_3',
]);
// 不可点击的示例
echo '<label class="control-label">Select Attachment</label>';
echo FileInput::widget([
  'name' => 'attachment_4',
  'disabled' => true
]);

而这些都是常规操作,我们来设想一下,我们要完成淘宝的商品添加,有个商品表,有着一对多关系的若干张图片,这时候就需要用到多图上传功能了。而且我们还希望上传图片是异步的,那么我们可以这么配置我们的fileInput组件

<?= $form->field($model, 'image[]')->label($label)->widget(FileInput::classname(), [
  // 'name' => 'ImgSelect',
  'language' => 'zh-CN', 
  'options' => ['multiple' => true, 'accept' => 'image/*'], 
  'pluginOptions' => [ 
    'initialPreview' => $initialPreview, 
    'initialPreviewConfig' => $initialPreviewConfig, 
    'allowedPreviewTypes' => ['image'], 
    'allowedFileExtensions' => ['jpg', 'gif', 'png'], 
    'previewFileType' => 'image', 
    'overwriteInitial' => false, 
    'browseLabel' => '选择图片',
    'msgFilesTooMany' => "选择上传的图片数量({n}) 超过允许的最大图片数{m}!", 
    'maxFileCount' => 5,//允许上传最多的图片5张 
    'maxFileSize' => 2048,//限制图片最大200kB 
    'uploadUrl' => Url::to(['/upload/image']),
    //'uploadExtraData' => ['testid' => 'listimg'], 
    'uploadAsync' => true,//配置异步上传还是同步上传 
  ],
  'pluginEvents' => [ 
    'filepredelete' => "function(event, key) { 
        return (!confirm('确认要删除')); 
      }", 
    'fileuploaded' => 'function(event, data, previewId, index) { 
        $(event.currentTarget.closest("form")).append(data.response.imgfile);
      }', 
    'filedeleted' => 'function(event, key) { 
        $(event.currentTarget.closest("form")).find("#"+key).remove(); 
        return;
      }', 
  ]
]); ?>

我们在控制器配置好图片浏览的配置,传入进来。代码里的关键点我已经加上了配置,我们可以看到,这时异步上传的url已经配置到了 upload/image 这个控制器里,而我们也在删除,上传等操作完成时加上了js的回调。

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

看下上传图片的控制器里,我们是怎么写 actionImage 这个函数的

/** 
  * 上传图片到临时目录 
  * @return string 
  * @throws \yii\base\Exception 
  */ 
 public function actionImage() 
 { 
   if (Yii::$app->request->isPost) { 
     $res = []; 
     $initialPreview = []; 
     $initialPreviewConfig = []; 
     $images = UploadedFile::getInstancesByName("UploadImage[image]"); 
     if (count($images) > 0) { 
       foreach ($images as $key => $image) { 
         if ($image->size > 2048 * 1024) { 
           $res = ['error' => '图片最大不可超过2M']; 
           return json_encode($res); 
         } 
         if (!in_array(strtolower($image->extension), array('gif', 'jpg', 'jpeg', 'png'))) { 
           $res = ['error' => '请上传标准图片文件, 支持gif,jpg,png和jpeg.']; 
           return json_encode($res); 
         } 
         $dir = '/uploads/temp/'; 
         //生成唯一uuid用来保存到服务器上图片名称 
         $pickey = ToolExtend::genuuid(); 
         $filename = $pickey . '.' . $image->getExtension();
         //如果文件夹不存在,则新建文件夹 
         if (!file_exists(Yii::getAlias('@backend') . '/web' . $dir)) { 
           FileHelper::createDirectory(Yii::getAlias('@backend') . '/web' . $dir, 777); 
         } 
         $filepath = realpath(Yii::getAlias('@backend') . '/web' . $dir) . '/'; 
         $file = $filepath . $filename; 
         if ($image->saveAs($file)) { 
           $imgpath = $dir . $filename; 
           /*Image::thumbnail($file, 100, 100) 
             ->save($file . '_100x100.jpg', ['quality' => 80]); 
*/ 
          //  array_push($initialPreview, "<img src='" . $imgpath . "' class='file-preview-image' alt='" . $filename . "' title='" . $filename . "'>"); 
           $config = [ 
             'caption' => $filename, 
             'width' => '120px', 
             'url' => '../upload/delete', // server delete action 
             'key' => $pickey,
             'extra' => ['filename' => $filename] 
           ];
           array_push($initialPreviewConfig, $config); 
           $res = [ 
             "initialPreview" => $initialPreview, 
             "initialPreviewConfig" => $initialPreviewConfig, 
             "imgfile" => "<input name='image[]' id='" . $pickey . "' type='hidden' value='" . $imgpath . "'/>",
             'filename' => $filename,
             'imagePath' => $imgpath,
           ]; 
         }
       } 
     } 
     return json_encode($res); 
   } 
 }

到此,多图上传的工作我们也就完美的实现了。

为了实现图片的删除效果,这里可以先上传两张图片。你可以单张上传也可以多张上传。

上传成功后你可以刷新当前页面,因为一开始我们就在controller中实现了图片的预览工作,所以理应会展示我们已经上传的两张图片。

至于删除函数就不讲了,只要在浏览里配置上删除的url,也是一样的操作咯。

总结

以上所述是小编给大家介绍的yii2多图上传组件的使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

PHP 相关文章推荐
跟我学小偷程序之成功偷取首页(第三天)
Oct 09 PHP
PHP UTF8编码内的繁简转换类
Jul 20 PHP
PHPLog php 程序调试追踪工具
Sep 09 PHP
PHP与SQL注入攻击防范小技巧
Sep 16 PHP
php模板函数 正则实现代码
Oct 15 PHP
利用php实现禁用IE和火狐的缓存问题
Dec 03 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
Aug 20 PHP
PHP实现文件上传与下载实例与总结
Mar 13 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
Jan 15 PHP
可兼容php5与php7的cURL文件上传功能实例分析
May 11 PHP
laravel5.5添加echarts实现画图功能的方法
Oct 09 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
Oct 11 PHP
PHP数组去重的更快实现方式分析
May 09 #PHP
PHP+MySQL实现消息队列的方法分析
May 09 #PHP
PHP共享内存使用与信号控制实例分析
May 09 #PHP
php curl批处理实现可控并发异步操作示例
May 09 #PHP
php使用curl伪造来源ip和refer的方法示例
May 08 #PHP
PHP+ajax实现获取新闻数据简单示例
May 08 #PHP
PHP 计算两个特别大的整数实例代码
May 07 #PHP
You might like
PHP脚本的10个技巧(5)
2006/10/09 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
实例详解Python模块decimal
2019/06/26 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
高中生家长会演讲稿
2014/01/14 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
家长对孩子的感言
2014/03/10 职场文书
和谐社区口号
2014/06/19 职场文书
毕业生求职信范文
2014/06/29 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
Android studio 简单计算器的编写
2022/05/20 Java/Android