yii2.0使用Plupload实现带缩放功能的多图上传


            本文讲解了plupload的相关代码，实现了ajax多图同时上传，然后将图片进行缩放，最后显示图片，分享给大家供大家参考，具体内容如下

1、文章视图中调用Plupload







<?= \common\widgets\Plupload::widget([

 'model'=>$model,

 'attribute'=>'cover_img',

 'url'=>'/file/upload',//处理文件上传控制器

])?>





2、\common\widgets\Plupload 组件







<?php

namespace common\widgets;



use backend\assets\UploadAsset;

use yii;

use yii\helpers\Html;

use yii\base\Exception;



class Plupload extends yii\bootstrap\Widget{

 public $model;

 public $attribute;

 public $name;

 public $url;



 private $_html;





 public function init(){

  parent::init();

 if(!$this->url){

 throw new Exception('url参数不能为空');

 }

  if(!$this->model){

   throw new Exception('model属性不能为空');

  }

  if(!$this->attribute){

   throw new Exception('attribute属性不能为空');

  }

 }

 public function run(){

  $model = $this->model;

  $attribute = $this->attribute;

  $path = $model->$attribute?$model->$attribute:"/images/noimage.gif";//显示文章图片或者默认图片

  $this->_html.='<div class="form-group field-article-author" id="container">';

  $this->_html.=Html::activeLabel($model,$attribute);

  $this->_html.=Html::activeHiddenInput($model,$attribute,['id'=>'hidden_input','value'=>$path]);

  $this->_html .= '<div id="pickfiles" style="height:50px;min-width:50px;max-width: 300px;overflow: hidden;"><img height="50" src="'.$path.'" /></div>';

  $this->_html.='</div> ';

  UploadAsset::register($this->view);

 $this->view->registerJs(

 '$(function(){

    initCoverImageUploader("pickfiles","container","2mb","'.$this->url.'","'.Yii::$app->request->getCsrfToken().'");

   });'

 );



  return $this->_html;

 }



}







3、backend\assets\UploadAsset

注册相关js







<?php

namespace backend\assets;



use yii\web\AssetBundle;



class UploadAsset extends AssetBundle

{

 public $basePath = '@webroot';

 public $baseUrl = '@web';

 public $css = [

 ];

 public $js = [

  'js/upload.js'

 ];

 public $depends = [

  'backend\assets\PluploadAsset',

 ];

}







4、js/upload.js

ajax处理代码







function initCoverImageUploader(buttonId,contatinerId,maxFileSize,url,csrfToken){

 var uploader = new plupload.Uploader({

  runtimes : 'html5,flash,silverlight,html4',

  browse_button :buttonId, // you can pass an id...

  container: contatinerId, // ... or DOM Element itself

  url : url,

  flash_swf_url : '@vendor/moxiecode/plupload/js/Moxie.swf',

  silverlight_xap_url : '@vendor/moxiecode/plupload//js/Moxie.xap',



  filters : {

   max_file_size : maxFileSize,

   mime_types: [

    {title : "Image files", extensions : "jpg,gif,png"},

    {title : "Zip files", extensions : "zip"}

   ]

  },

  multipart_params:{

   '_csrf':csrfToken

  },

  init: {

   FilesAdded: function(up, files) {

    uploader.start();

   },

   UploadProgress: function(up, file) {

    $('#'+contatinerId+' p').text('已上传:'+file.percent+'%');

   },

   FileUploaded:function (up, file, result) {

    result = $.parseJSON(result.response);

    if(result.code == 0){

     $('#'+buttonId).html('<img src="'+result.path+'" height="50" />');

     $('#hidden_input').val(result.path);

     //console.log(result.message);

    }

   },

   Error: function(up, err) {

    document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));

   }

  }

 });



 uploader.init();

}







5、backend\assets\PluploadAsset

注册plupload相关资源







<?php



namespace backend\assets;



use yii\web\AssetBundle;





class PluploadAsset extends AssetBundle

{

 public $sourcePath = '@vendor/moxiecode/plupload';



 public $css = [

 ];

 public $js = [

  'js/plupload.full.min.js',

 ];

 public $depends = [

  'yii\web\JqueryAsset',

 ];

}







6、FileController

控制器调用模型处理上传文件，并且返回结果







class FileController extends BaseController

{

 public function actionUpload(){

  Yii::$app->response->format=Response::FORMAT_JSON;

  $model = New ImageUpload();

  $model->fileInputName = 'file';

  if($model->save()){

   return ['code'=>0,'message'=>$model->getMessage(),'path'=>$model->getUrlPath()];

  }else{

   return ['code'=>1,'message'=>$model->getMessage()];

  }

 }



}







7、common\models\ImageUpload

模型中对上传文件做了一定的检测，然后将源文件按照一定的比例进行缩放







<?php



namespace common\models;



use yii\base\Exception;

use yii\helpers\FileHelper;

use yii\web\UploadedFile;



class ImageUpload extends \yii\base\Object

{

 public $fileInputName = 'file';//上传表单 file name

 public $savePath ;//图像保存根位置

 public $allowExt = ['jpg','png','jpeg','gif','bmp'];//允许上传后缀

 public $maxFileSize=1024100000;//最大大小

 public $allowType = ['image/jpeg','image/bmp','image/gif','image/png','image/pjpeg','image/bmp','image/gif','image/x-png','image/pjpeg','image/bmp', 'image/gif' ,'image/x-png','image/pjpeg','image/bmp','image/gif','image/x-png'];



 private $_uploadFile;//上传文件

 private $filePath;//文件路径

 private $urlPath;//访问路径

 private $res=false;//返回状态

 private $message;//返回信息



 public function getMessage(){

  return $this->message;

 }

 public function getUrlPath(){

  return $this->urlPath;

 }



 public function init(){

  if(!$this->fileInputName) throw new Exception('fileInputName属性不能为空');



  if(!$this->savePath) $this->savePath = \Yii::$app->basePath.'/web/uploads/images';

  $this->savePath = rtrim($this->savePath,'/');

  if(!file_exists($this->savePath)){

   if(! FileHelper::createDirectory($this->savePath)){

    $this->message = '没有权限创建'.$this->savePath;

    return false;

   }

  }



  $this->_uploadFile = UploadedFile::getInstanceByName($this->fileInputName);

  if(!$this->_uploadFile){

   $this->message = '没有找到上传文件';

   return false;

  }

  if($this->_uploadFile->error){

   $this->message = '上传失败';

   return false;

  }



  if(!in_array($this->extension,$this->allowExt) || !in_array($this->type,$this->allowType)){

   $this->message = '该文件类型不允许上传';

   return false;

  }



  if($this->_uploadFile->size> $this->maxFileSize){

   $this->message = '文件过大';

   return false;

  }



  $path = date('Y-m',time());

  if(!file_exists($this->savePath.'/'.$path)){

   FileHelper::createDirectory($this->savePath.'/'.$path);

  }

  $name = substr(\Yii::$app->security->generateRandomString(),-4,4);

  $this->filePath = $this->savePath.'/'.$path.'/'.$this->baseName.'--'.$name.'.'.$this->extension;

  $this->urlPath = '/uploads/images/'.$path.'/'.$this->baseName.'--'.$name.'.'.$this->extension;

 }



 public function save(){

  if($this->_uploadFile->saveAs($this->filePath)){

   $this->CreateThumbnail($this->filePath);//缩放图片

   $this->res = true;

  }else{

   $this->res = false;

  }

  if($this->res){

   $this->message = $this->_uploadFile->baseName.'.'.$this->_uploadFile->extension.'上传成功';

  }else{

   $this->message = $this->_uploadFile->baseName.'.'.$this->_uploadFile->extension.'上传失败';

  }

  return $this->res;

 }



 /**

  * 获取文件名字

  * @return null

  */

 public function getBaseName(){

  if($this->_uploadFile){

   return $this->_uploadFile->baseName;

  }else{

   return null;

  }

 }

 /**

  * 返回文件后缀

  * @return null

  */

 public function getExtension(){

  if($this->_uploadFile){

   return $this->_uploadFile->extension;

  }else{

   return null;

  }

 }

 /**

  * 返回文件类型

  * @return mixed

  */

 public function getType(){

  if($this->_uploadFile){

   return $this->_uploadFile->type;

  }

  return null;

 }



 /**

  * 生成保持原图纵横比的缩略图，支持.png .jpg .gif

  * 缩略图类型统一为.png格式

  * $srcFile  原图像文件名称

  * $toFile  缩略图文件名称，为空覆盖原图像文件

  * $toW   缩略图宽

  * $toH   缩略图高

  * @return bool

  */

 public static function CreateThumbnail($srcFile, $toFile="", $toW=100, $toH=100)

 {

  if ($toFile == "") $toFile = $srcFile;



  $data = getimagesize($srcFile);//返回含有4个单元的数组，0-宽，1-高，2-图像类型，3-宽高的文本描述。

  if (!$data) return false;

  //将文件载入到资源变量im中

  switch ($data[2]) //1-GIF，2-JPG，3-PNG

  {

   case 1:

    if(!function_exists("imagecreatefromgif")) return false;

    $im = imagecreatefromgif($srcFile);

    break;

   case 2:

    if(!function_exists("imagecreatefromjpeg")) return false;

    $im = imagecreatefromjpeg($srcFile);

    break;

   case 3:

    if(!function_exists("imagecreatefrompng")) return false;

    $im = imagecreatefrompng($srcFile);

    break;

  }

  //计算缩略图的宽高

  $srcW = imagesx($im);

  $srcH = imagesy($im);

  $toWH = $toW / $toH;

  $srcWH = $srcW / $srcH;

  if ($toWH <= $srcWH) {

   $ftoW = $toW;

   $ftoH = (int)($ftoW * ($srcH / $srcW));

  } else {

   $ftoH = $toH;

   $ftoW = (int)($ftoH * ($srcW / $srcH));

  }



  if (function_exists("imagecreatetruecolor")) {

   $ni = imagecreatetruecolor($ftoW, $ftoH); //新建一个真彩色图像

   if ($ni) {

    //重采样拷贝部分图像并调整大小 可保持较好的清晰度

    imagecopyresampled($ni, $im, 0, 0, 0, 0, $ftoW, $ftoH, $srcW, $srcH);

   } else {

    //拷贝部分图像并调整大小

    $ni = imagecreate($ftoW, $ftoH);

    imagecopyresized($ni, $im, 0, 0, 0, 0, $ftoW, $ftoH, $srcW, $srcH);

   }

  } else {

   $ni = imagecreate($ftoW, $ftoH);

   imagecopyresized($ni, $im, 0, 0, 0, 0, $ftoW, $ftoH, $srcW, $srcH);

  }



  switch ($data[2]) //1-GIF，2-JPG，3-PNG

  {

   case 1:

    imagegif($ni, $toFile);

    break;

   case 2:

    imagejpeg($ni, $toFile);

    break;

   case 3:

    imagepng($ni, $toFile);

    break;

  }

  ImageDestroy($ni);

  ImageDestroy($im);

  return $toFile;

 }

}





以上就是本文的全部内容，希望对大家学习php程序设计有所帮助。