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 相关文章推荐
ASP和PHP都是可以删除自身的
Apr 09 PHP
php定时删除文件夹下文件(清理缓存文件)
Jan 23 PHP
php连接mssql数据库的几种方法
Feb 21 PHP
深入PHP与浏览器缓存的分析
Jun 03 PHP
php实现将字符串按照指定距离进行分割的方法
Mar 14 PHP
Yii2前后台分离及migrate使用(七)
May 04 PHP
PHP通过加锁实现并发情况下抢码功能
Aug 10 PHP
php版微信公众平台入门教程之开发者认证的方法
Sep 26 PHP
Yii2框架BootStrap样式的深入理解
Nov 07 PHP
ThinkPHP框架实现数据增删改
May 07 PHP
laravel通用化的CURD的实现
Dec 13 PHP
ThinkPHP5与单元测试PHPUnit使用详解
Feb 23 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
8个必备的PHP功能开发
2015/10/02 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
Python中threading模块join函数用法实例分析
2015/06/04 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
幼师自荐信范文
2013/10/06 职场文书
大学自我鉴定
2013/12/20 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
合作经营协议书范本
2014/04/17 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
学生会个人总结范文
2015/02/15 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
详解Java实践之建造者模式
2021/06/18 Java/Android
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript