登录  /  注册

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

jacklove
发布: 2018-06-25 17:59:18
原创
1431人浏览过

这篇文章主要介绍了yii2多图上传组件的使用教程,在使用过程中有许多注意要点,下面小编给大家分享到脚本之家平台,需要的朋友可以参考下

最近在使用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 &#39;<label class="control-label">Add Attachments</label>&#39;;
echo FileInput::widget([
  &#39;model&#39; => $model,
  &#39;attribute&#39; => &#39;attachment_1[]&#39;,
  &#39;options&#39; => [&#39;multiple&#39; => true]
]);
// 不绑定model的使用方法
echo &#39;<label class="control-label">Upload Document</label>&#39;;
echo FileInput::widget([
  &#39;name&#39; => &#39;attachment_3&#39;,
]);
// 不可点击的示例
echo &#39;<label class="control-label">Select Attachment</label>&#39;;
echo FileInput::widget([
  &#39;name&#39; => &#39;attachment_4&#39;,
  &#39;disabled&#39; => true
]);
登录后复制

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

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

我们在控制器配置好图片浏览的配置,传入进来。代码里的关键点我已经加上了配置,我们可以看到,这时异步上传的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 = [&#39;error&#39; => &#39;图片最大不可超过2M&#39;]; 
           return json_encode($res); 
         } 
         if (!in_array(strtolower($image->extension), array(&#39;gif&#39;, &#39;jpg&#39;, &#39;jpeg&#39;, &#39;png&#39;))) { 
           $res = [&#39;error&#39; => &#39;请上传标准图片文件, 支持gif,jpg,png和jpeg.&#39;]; 
           return json_encode($res); 
         } 
         $dir = &#39;/uploads/temp/&#39;; 
         //生成唯一uuid用来保存到服务器上图片名称 
         $pickey = ToolExtend::genuuid(); 
         $filename = $pickey . &#39;.&#39; . $image->getExtension();
         //如果文件夹不存在,则新建文件夹 
         if (!file_exists(Yii::getAlias(&#39;@backend&#39;) . &#39;/web&#39; . $dir)) { 
           FileHelper::createDirectory(Yii::getAlias(&#39;@backend&#39;) . &#39;/web&#39; . $dir, 777); 
         } 
         $filepath = realpath(Yii::getAlias(&#39;@backend&#39;) . &#39;/web&#39; . $dir) . &#39;/&#39;; 
         $file = $filepath . $filename; 
         if ($image->saveAs($file)) { 
           $imgpath = $dir . $filename; 
           /*Image::thumbnail($file, 100, 100) 
             ->save($file . &#39;_100x100.jpg&#39;, [&#39;quality&#39; => 80]); 
*/ 
          //  array_push($initialPreview, "<img src=&#39;" . $imgpath . "&#39; class=&#39;file-preview-image&#39; alt=&#39;" . $filename . "&#39; title=&#39;" . $filename . "&#39;>"); 
           $config = [ 
             &#39;caption&#39; => $filename, 
             &#39;width&#39; => &#39;120px&#39;, 
             &#39;url&#39; => &#39;../upload/delete&#39;, // server delete action 
             &#39;key&#39; => $pickey,
             &#39;extra&#39; => [&#39;filename&#39; => $filename] 
           ];
           array_push($initialPreviewConfig, $config); 
           $res = [ 
             "initialPreview" => $initialPreview, 
             "initialPreviewConfig" => $initialPreviewConfig, 
             "imgfile" => "<input name=&#39;image[]&#39; id=&#39;" . $pickey . "&#39; type=&#39;hidden&#39; value=&#39;" . $imgpath . "&#39;/>",
             &#39;filename&#39; => $filename,
             &#39;imagePath&#39; => $imgpath,
           ]; 
         }
       } 
     } 
     return json_encode($res); 
   } 
 }
登录后复制

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

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

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

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

总结

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

您可能感兴趣的文章:

PHP实现用户登录的案例代码php实例

ThinkPHP防止重复提交表单的方法实例分析php实例

PHP分页显示的方法分析【附PHP通用分页类php技巧




以上就是yii2多图上传组件的使用教程php实例的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号