PHP开发——yii2多图上传组件的使用

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
]);

<?= $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;
            }',  
    ]
]); ?>

  /** 
   * 上传图片到临时目录 
   * @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);  
      }  
  }