推荐个图片上传的扩展 [ 2.0 版本 ]

再也不想用yii2-uploadify等之类的基于flash的文件上传了，其他我就不说，flash现在呵呵了，目前使用如下扩展：kartik-v/yii2-widget-fileinput
官网其实有demo，但是，有些细节没有说明，研究了下，然后整理成blog，有兴趣可以看看，

原文如下：
网上看到一个基于Yii2.x的文件上传功能插件，基于Html5上传，摒弃了传统的flash上传，功能相当实用，现将其使用总结列出：
先看看插件的预览效果吧:

,

废话不多说，开始从头到尾说明

1.Composer安装该插件

composer require kartik-v/yii2-widget-fileinput "@dev"

2.渲染页面效果

create控制器中的代码如下，正常实例化Model以及上传的插件，我这里使用的是一个图片轮播模块，所以AR模型为Rotatain;

public function actionCreate()
{
    $model = new Rotatain();
	
    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        return $this->redirect(['view', 'id' => $model->id]);
    } else {
        return $this->render('create', [
            'model' => $model,
            'upload' => new UploadForm()
        ]);
    }
}

模板中的代码如下，model与upload通过render渲染传参，不多说

<?php 
$form = ActiveForm::begin([
    'options'    => [
        'class'     => 'form-horizontal',
    ],
    'fieldConfig'=>[
        'template'=>"<div class='row'><div class='col-lg-1 text-right text-fixed'>{label}</div><div class='col-lg-9'>{input}</div><div class='col-lg-2 errors'>{error}</div></div>",
    ]
]); 
?>
  
<?= $form->field($upload , 'imageFile')->widget(\kartik\file\FileInput::className(),[
    'options'   => [
		'accept'  => 'images/*',
		'module'  => 'Rotatain'
    ],
    'pluginOptions' => [
		'uploadUrl' => Url::to(['upload']),
		'uploadExtraData' => [
			'model' => 'rotatain'	//这个参数可以省略，额外的POST数据，我这里用来保存图片的属性到数据库中方便管理图片资源rotatain为Rotatain AR模型
		]
    ],
    //网上很多地方都没详细说明回调触发事件，其实fileupload为上传成功后触发的，三个参数，主要是第二个，有formData，jqXHR以及response参数，上传成功后返回的ajax数据可以在response获取
    'pluginEvents'  => [
		'fileuploaded'  => "function (object,data){
			$('.field-rotatain-image').show().find('input').val(data.response.imageUrl);
		}",
		//错误的冗余机制
		'error' => "function (){
			alert('图片上传失败');
		}"
    ]
]);?>

3.后台上传方法

有些人不明白，其实上传的数据还是通过$_FILE参数接收

actionUpload定义的方法

public function actionUpload()
{
    $uploadForm = new UploadForm();

    if(Yii::$app->request->isPost){
		$uploadForm->imageFile = UploadedFile::getInstance($uploadForm, 'imageFile');

		if($imageUrl = $uploadForm->upload()){
			echo Json::encode([
			   'imageUrl'    => $imageUrl,
				'error'   => ''		//上传的error字段，如果没有错误就返回空字符串，否则返回错误信息，客户端会自动判定该字段来认定是否有错
			]);
		}else{
			echo Json::encode([
				'imageUrl'    => '',
				'error'   => '文件上传失败'
			]);
		}
    }
}

UploadForm类方法：

<?php
/**
 * Created by PhpStorm.
 * User: recminy
 * Date: 2016/6/26
 * Time: 20:52
 * email:rewminy@qq.com
 */

namespace backend\models;


use yii\base\Model;
use yii\web\UploadedFile;

class UploadForm extends Model
{
	//use it to save $_FILE data.
	/**
	 * @var $imageFile UploadedFile[];
	 */
	public $imageFile;

	public function rules()
	{
		return [
			//数据验证这里可自己做
			//[['imageFile'], 'file', 'skipOnEmpty' => false, 'extensions' => 'png, jpg'],
		];
	}


	public function upload()
	{

		if($this->validate()){
			$path = \Yii::getAlias('@upload') . '/' . date("Ymd");
			if(!is_dir($path) || !is_writable($path)){
				\yii\helpers\FileHelper::createDirectory($path,0777,true);
			}
			$filePath = $path  . '/' . \Yii::$app->request->post('model','') . '_' .md5(uniqid() . mt_rand(10000,99999999)) . '.' . $this->imageFile->extension;

			if( $this->imageFile->saveAs($filePath)){
			
				//这里将上传成功后的图片信息保存到数据库
				$imageUrl = $this->parseImageUrl($filePath);
				$imageModel = new Images();
				$imageModel->url = $imageUrl;
				$imageModel->addtime = time();
				$imageModel->status = 0;
				$imageModel->module = \Yii::$app->request->post('model','');

				$imageModel->save(false);

				return $imageUrl;
			}
		}

		return false;
	}

	/**
	 * 这里在upload中定义了上传目录根目录别名，以及图片域名
	 * 将/var/www/html/gushanxia/upload/20160626/file.png 转化为 http://statics.gushanxia.com/20160626/file.png
	 * format:http://domain/path/file.extension
	 * @param $filePath
	 * @return string
	 */
	private function parseImageUrl($filePath)
	{
		if(strpos($filePath,\Yii::getAlias('@upload')) !== false){
			return \Yii::$app->params['assetDomain'] . str_replace(\Yii::getAlias('@upload'),'',$filePath);
		}else{
			return $filePath;
		}
	}
		
} 

附加：图片的MySQL表结构语句

CREATE TABLE `yii2_images` (
	`id` int(11) unsigned NOT NULL AUTO_INCREMENT,
	`url` varchar(255) NOT NULL,
	`addtime` int(11) NOT NULL,
	`module` char(15) NOT NULL DEFAULT '',
	`status` tinyint(4) NOT NULL DEFAULT '0',
	PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=24 DEFAULT CHARSET UTF8;

PS:说明

官网其实有很多demo，只是说明如何渲染页面，没有说明详细的处理回调以及上传返回数据，关键在于如何上传后返回数据：

echo Json::encode([
    'imageUrl'    => '',
    'error'   => '文件上传失败'
]);

error字段的定义，以及事件处理的定义：

'pluginEvents'  => [
    'fileuploaded'  => "function (object,data){
		 $('.field-rotatain-image').show().find('input').val(data.response.imageUrl);
    }",
			//错误的冗余机制
	'fileuploaderror' => "function (){
		alert('图片上传失败');
	}"
]

其实回调事件不仅仅有以上2个，具体有以下几种类型：

case 'filebatchuploadcomplete':
case 'filebatchuploadsuccess':
case 'fileuploaded':
case 'fileclear':
case 'filecleared':
case 'filereset':
case 'fileerror':
case 'filefoldererror':
case 'fileuploaderror':
case 'filebatchuploaderror':
case 'filedeleteerror':
case 'filecustomerror':
case 'filesuccessremove':

关于其他的界面风格用法详情可以参考官网：

原文地址：!http://www.gushanxia.com/item/29