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

发布时间：2021-05-16 13:38:30 所属栏目：编程来源：网络整理

导读：最近在行使yii2开拓一个表单页面的时辰，有多图上传的需求，轻微找了找这方面的组件，根基都安利fileInput这个组件，于是就实行着行使这个库来完成后端表单页面的多图上传成果。行使的进程中发明照旧有不少小细节必要留意的，于是记录一下行使的进程。这个

最近在行使yii2开拓一个表单页面的时辰，有多图上传的需求，轻微找了找这方面的组件，根基都安利fileInput这个组件，于是就实行着行使这个库来完成后端表单页面的多图上传成果。行使的进程中发明照旧有不少小细节必要留意的，于是记录一下行使的进程。

这个库的github地点在这里，安装的部门就很通例了，按文档走就可以了。

我们来看官方文得魅展示的几个通例操纵：

field($model,'avatar')->widget(FileInput::classname(),[ 'options' => ['accept' => 'image/*'],]); // 多图上传示例 echo ''; echo FileInput::widget([ 'model' => $model,'attribute' => 'attachment_1[]','options' => ['multiple' => true] ]); // 不绑定model的行使要领 echo ''; echo FileInput::widget([ 'name' => 'attachment_3',]); // 不行点击的示例 echo ''; echo FileInput::widget([ 'name' => 'attachment_4','disabled' => true ]);

而这些都是通例操纵，我们来假想一下，我们要完成淘宝的商品添加，有个商品表，有着一对多相关的多少张图片，这时辰就必要用到多图上传成果了。并且我们还但愿上传图片是异步的，那么我们可以这么设置我们的fileInput组件

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," yii2多图上传组件的行使教程

"); $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多图上传组件的行使教程，但愿对各人有所辅佐。措施员碰着题目城市上（编程之家52php.cn）查找题目解答要领！假如认为站点还不错，顺手转发给措施员伴侣一下！

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys