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

前端之家收集整理的这篇文章主要介绍了yii2多图上传组件的使用教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

field($model,'avatar')->widget(FileInput::classname(),[ 'options' => ['accept' => 'image/*'],]); // 多图上传示例 echo '

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

PHP;"> 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 这个函数

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,"" . $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" => "",'filename' => $filename,'imagePath' => $imgpath,]; } } } return json_encode($res); } }

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

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

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

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

总结

以上所述是小编给大家介绍的yii2多图上传组件的使用教程,希望对大家有所帮助。程序员遇到问题都会上(编程之家jb51.cc)查找问题解答方法!如果觉得站点还不错,随手转发给程序员朋友一下!

猜你在找的PHP相关文章