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 相关文章推荐
php正则校验用户名介绍
Jul 19 PHP
PHP 多进程 解决难题
Jun 22 PHP
按上下级层次关系输出内容的PHP代码
Jul 17 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
Dec 29 PHP
PHP中变量引用与变量销毁机制分析
Nov 15 PHP
PHP+MySQL删除操作实例
Jan 21 PHP
php+mysqli使用预处理技术进行数据库查询的方法
Jan 28 PHP
在WordPress中使用wp-cron插件来设置定时任务
Dec 10 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
Jun 09 PHP
PHP使用DOM对XML解析处理操作示例
Jul 04 PHP
Mac下关于PHP环境和扩展的安装详解
Oct 17 PHP
php中yar框架实例用法讲解
Dec 27 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 分页函数multi() discuz
2009/06/21 PHP
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
实例讲解python中的序列化知识点
2018/10/08 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
24式加速你的Python(小结)
2019/06/13 Python
如何使用Python 打印各种三角形
2019/06/28 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
体育教育个人自荐信范文
2013/12/01 职场文书
校园摄影活动策划方案
2014/02/05 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
2015新学期开学寄语
2015/02/26 职场文书
民事答辩状格式范文
2015/05/21 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
CPU不支持Windows11系统怎么办
2021/11/21 数码科技