• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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多图上传组件的使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    您可能感兴趣的文章:
    • Yii2使用表单上传文件的实例代码
    • Yii2使用自带的UploadedFile实现的文件上传
    • Yii2组件之多图上传插件FileInput的详细使用教程
    • yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
    • Yii2实现ajax上传图片插件用法
    • yii2利用自带UploadedFile实现上传图片的示例
    • yii2 上传图片的示例代码
    • yii2高级应用之自定义组件实现全局使用图片上传功能的方法
    • Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
    • yii2.0整合阿里云oss上传单个文件的示例
    • Yii2.0多文件上传实例说明
    • YII2框架实现表单中上传单个文件的方法示例
    上一篇:PHP数组去重的更快实现方式分析
    下一篇:PHP实现用户登录的案例代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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