Yii2 framework学习笔记(八)

jquery-file-upload（http://blueimp.github.io/jquery-file-upload/）是一个优秀的文件ajax上传插件，支持多选，预览，并发上传等。

jquery-file-upload已有现成的yii2插件（https://github.com/2amigos/yii2-file-upload-widget），安装同样使用composer。

在composer.json里加入"2amigos/yii2-file-upload-widget": "~1.0"，再运行composer update

这个插件只提供了前台显示的功能（前台的实现也有些缺陷，下文提），并未提供后台处理代码，而且连例子都没有，需要自己摸索。

前台使用范例里的代码，直接复制粘贴。

 $model,
    'attribute' => 'image',
    'url' => ['media/upload', 'id' => $tour_id],
    'gallery' => false,
    'fieldOptions' => [
            'accept' => 'image/*'
    ],
    'clientOptions' => [
            'maxFileSize' => 2000000
    ],
    // ...
    'clientEvents' => [
            'fileuploaddone' => 'function(e, data) {
                                    console.log(e);
                                    console.log(data);
                                }',
            'fileuploadfail' => 'function(e, data) {
                                    console.log(e);
                                    console.log(data);
                                }',
    ],
]);
?>

界面如下

根据里面的配置，我们需要新建两个文件，一个ImageUploadModel.php，里面包含image字段

class UploadImageForm extends Model {

	public $image;
	
	public function getImage() {
		return $this->image;
	}
	
	public function setImage($newOne) {
		$this->image = $newOne;
	}
}

一个控制器MediaController.php，包括actionUpload方法

后台返回的这些内容要根据原插件的文档来，yii2插件网站上完全没有提供相关信息。

参考网址：https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#using-jquery-file-upload-ui-version-with-a-custom-server-side-upload-handler

还需要提供actionDelete方法，用于删除

AI Note

AI Note 助手，像贴心女仆一样助力你的笔记！智能总结内容，精确划重点，提供专业建议，让学习与工作更高效。让你的笔记更清晰、有条理，知识尽在眼前！

下载

然后做些自定义的功能。在列表项里加个textarea用于输入图片备注，如图。

这里需要修改\yii2\vendor\2amigos\yii2-file-upload-widget\src\views\upload.php

这个文件是每个单行的模板，加入一个textarea

实际运用中还遇到另一个问题，如果同时选了多张照片，并发上传的话，后面收到的都是第一个请求里的图片，原本的图片都没法上传。

怀疑是因为fileinput的name都是UploadImageForm[image]引起，但未证实，望知道的告知。

处理方法是禁用并发上传，使用同步上传方式，如上图，加入'sequentialUploads' => true的选项

 以上就是Yii2 framework学习笔记(八) 的内容，更多相关内容请关注PHP中文网（www.php.cn）！