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

最近在使用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::html' target='_blank'>classname(), [ options = [ accept = image/* ],// 多图上传示例echo label >
而这些都是常规操作，我们来设想一下，我们要完成淘宝的商品添加，有个商品表，有着一对多关系的若干张图片，这时候就需要用到多图上传功能了。而且我们还希望上传图片是异步的，那么我们可以这么配置我们的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 . >
到此，多图上传的工作我们也就完美的实现了。
为了实现图片的删除效果，这里可以先上传两张图片。你可以单张上传也可以多张上传。
上传成功后你可以刷新当前页面，因为一开始我们就在controller中实现了图片的预览工作，所以理应会展示我们已经上传的两张图片。
至于删除函数就不讲了，只要在浏览里配置上删除的url，也是一样的操作咯。
总结
以上所述是小编给大家介绍的yii2多图上传组件的使用教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
PHP实现用户登录的案例代码php实例
ThinkPHP防止重复提交表单的方法实例分析php实例
PHP分页显示的方法分析【附PHP通用分页类php技巧
以上就是yii2多图上传组件的使用教程php实例的详细内容，PHP教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。