首页 > 开发 > PHP > 正文

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

2024-05-04 23:41:17
字体:
来源:转载
供稿:网友
这篇文章主要介绍了yii2.0使用Plupload实现带缩放功能的多图上传的相关资料,需要的朋友可以参考下
 

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

1、文章视图中调用Plupload

<?= /common/widgets/Plupload::widget([ 'model'=>$model, 'attribute'=>'cover_img', 'url'=>'/file/upload',//处理文件上传控制器])?>

2、/common/widgets/Plupload 组件

<?phpnamespace 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

<?phpnamespace 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相关资源

<?phpnamespace 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
模型中对上传文件做了一定的检测,然后将源文件按照一定的比例进行缩放

<?phpnamespace 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程序设计有所帮助。



注:相关教程知识阅读请移步到PHP教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表