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

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

1、文章视图中调用Plupload

$model, 'attribute'=>'cover_img', 'url'=>'/file/upload',//处理文件上传控制器])?>

2、\common\widgets\Plupload 组件

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"></div>';%20%20$this->_html.='</div>%20';%20%20UploadAsset::register($this->view);%20$this->view->registerJs(%20'$(function(){%20%20%20%20initCoverImageUploader("pickfiles","container","2mb","'.$this->url.'","'.Yii::$app->request->getCsrfToken().'");%20%20%20});'%20);%20%20return%20$this->_html;%20}}

3、backend\assets\UploadAsset
注册相关js

<?phpnamespace%20backend\assets;use%20yii\web\AssetBundle;class%20UploadAsset%20extends%20AssetBundle{%20public%20$basePath%20=%20'@webroot';%20public%20$baseUrl%20=%20'@web';%20public%20$css%20=%20[%20];%20public%20$js%20=%20[%20%20'js/upload.js'%20];%20public%20$depends%20=%20[%20%20'backend\assets\PluploadAsset',%20];}

4、js/upload.js
ajax处理代码

function%20initCoverImageUploader(buttonId,contatinerId,maxFileSize,url,csrfToken){%20var%20uploader%20=%20new%20plupload.Uploader({%20%20runtimes%20:%20'html5,flash,silverlight,html4',%20%20browse_button%20:buttonId,%20//%20you%20can%20pass%20an%20id...%20%20container:%20contatinerId,%20//%20...%20or%20DOM%20Element%20itself%20%20url%20:%20url,%20%20flash_swf_url%20:%20'@vendor/moxiecode/plupload/js/Moxie.swf',%20%20silverlight_xap_url%20:%20'@vendor/moxiecode/plupload//js/Moxie.xap',%20%20filters%20:%20{%20%20%20max_file_size%20:%20maxFileSize,%20%20%20mime_types:%20[%20%20%20%20{title%20:%20"Image%20files",%20extensions%20:%20"jpg,gif,png"},%20%20%20%20{title%20:%20"Zip%20files",%20extensions%20:%20"zip"}%20%20%20]%20%20},%20%20multipart_params:{%20%20%20'_csrf':csrfToken%20%20},%20%20init:%20{%20%20%20FilesAdded:%20function(up,%20files)%20{%20%20%20%20uploader.start();%20%20%20},%20%20%20UploadProgress:%20function(up,%20file)%20{%20%20%20%20$('#'+contatinerId+'%20p').text('已上传:'+file.percent+'%');%20%20%20},%20%20%20FileUploaded:function%20(up,%20file,%20result)%20{%20%20%20%20result%20=%20$.parseJSON(result.response);%20%20%20%20if(result.code%20==%200){%20%20%20%20%20$('#'+buttonId).html('');%20%20%20%20%20$('#hidden_input').val(result.path);%20%20%20%20%20//console.log(result.message);%20%20%20%20}%20%20%20},%20%20%20Error:%20function(up,%20err)%20{%20%20%20%20document.getElementById('console').appendChild(document.createTextNode("\nError%20#"%20+%20err.code%20+%20":%20"%20+%20err.message));%20%20%20}%20%20}%20});%20uploader.init();}

5、backend\assets\PluploadAsset
注册plupload相关资源

<?phpnamespace%20backend\assets;use%20yii\web\AssetBundle;class%20PluploadAsset%20extends%20AssetBundle{%20public%20$sourcePath%20=%20'@vendor/moxiecode/plupload';%20public%20$css%20=%20[%20];%20public%20$js%20=%20[%20%20'js/plupload.full.min.js',%20];%20public%20$depends%20=%20[%20%20'yii\web\JqueryAsset',%20];}

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

class%20FileController%20extends%20BaseController{%20public%20function%20actionUpload(){%20%20Yii::$app->response->format=Response::FORMAT_JSON;%20%20$model%20=%20New%20ImageUpload();%20%20$model->fileInputName%20=%20'file';%20%20if($model->save()){%20%20%20return%20['code'=>0,'message'=>$model->getMessage(),'path'=>$model->getUrlPath()];%20%20}else{%20%20%20return%20['code'=>1,'message'=>$model->getMessage()];%20%20}%20}}

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

message;%20}%20public%20function%20getUrlPath(){%20%20return%20$this->urlPath;%20}%20public%20function%20init(){%20%20if(!$this->fileInputName)%20throw%20new%20Exception('fileInputName属性不能为空');%20%20if(!$this->savePath)%20$this->savePath%20=%20\Yii::$app->basePath.'/web/uploads/images';%20%20$this->savePath%20=%20rtrim($this->savePath,'/');%20%20if(!file_exists($this->savePath)){%20%20%20if(!%20FileHelper::createDirectory($this->savePath)){%20%20%20%20$this->message%20=%20'没有权限创建'.$this->savePath;%20%20%20%20return%20false;%20%20%20}%20%20}%20%20$this->_uploadFile%20=%20UploadedFile::getInstanceByName($this->fileInputName);%20%20if(!$this->_uploadFile){%20%20%20$this->message%20=%20'没有找到上传文件';%20%20%20return%20false;%20%20}%20%20if($this->_uploadFile->error){%20%20%20$this->message%20=%20'上传失败';%20%20%20return%20false;%20%20}%20%20if(!in_array($this->extension,$this->allowExt)%20||%20!in_array($this->type,$this->allowType)){%20%20%20$this->message%20=%20'该文件类型不允许上传';%20%20%20return%20false;%20%20}%20%20if($this->_uploadFile->size>%20$this->maxFileSize){%20%20%20$this->message%20=%20'文件过大';%20%20%20return%20false;%20%20}%20%20$path%20=%20date('Y-m',time());%20%20if(!file_exists($this->savePath.'/'.$path)){%20%20%20FileHelper::createDirectory($this->savePath.'/'.$path);%20%20}%20%20$name%20=%20substr(\Yii::$app->security->generateRandomString(),-4,4);%20%20$this->filePath%20=%20$this->savePath.'/'.$path.'/'.$this->baseName.'--'.$name.'.'.$this->extension;%20%20$this->urlPath%20=%20'/uploads/images/'.$path.'/'.$this->baseName.'--'.$name.'.'.$this->extension;%20}%20public%20function%20save(){%20%20if($this->_uploadFile->saveAs($this->filePath)){%20%20%20$this->CreateThumbnail($this->filePath);//缩放图片%20%20%20$this->res%20=%20true;%20%20}else{%20%20%20$this->res%20=%20false;%20%20}%20%20if($this->res){%20%20%20$this->message%20=%20$this->_uploadFile->baseName.'.'.$this->_uploadFile->extension.'上传成功';%20%20}else{%20%20%20$this->message%20=%20$this->_uploadFile->baseName.'.'.$this->_uploadFile->extension.'上传失败';%20%20}%20%20return%20$this->res;%20}%20/**%20%20*%20获取文件名字%20%20*%20@return%20null%20%20*/%20public%20function%20getBaseName(){%20%20if($this->_uploadFile){%20%20%20return%20$this->_uploadFile->baseName;%20%20}else{%20%20%20return%20null;%20%20}%20}%20/**%20%20*%20返回文件后缀%20%20*%20@return%20null%20%20*/%20public%20function%20getExtension(){%20%20if($this->_uploadFile){%20%20%20return%20$this->_uploadFile->extension;%20%20}else{%20%20%20return%20null;%20%20}%20}%20/**%20%20*%20返回文件类型%20%20*%20@return%20mixed%20%20*/%20public%20function%20getType(){%20%20if($this->_uploadFile){%20%20%20return%20$this->_uploadFile->type;%20%20}%20%20return%20null;%20}%20/**%20%20*%20生成保持原图纵横比的缩略图，支持.png .jpg .gif  * 缩略图类型统一为.png格式  * $srcFile  原图像文件名称  * $toFi本文来源gaodai#ma#com搞@@代~&码*网/搞gaodaima代码le  缩略图文件名称，为空覆盖原图像文件  * $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程序设计有所帮助。

喜欢 (0)赏

[搞代码]

分享 (0)