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 <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多图上传组件的使用教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！