yii2.0使用Plupload实现带缩放功能的多图上传
本文讲解了plupload的相关代码,实现了ajax多图同时上传,然后将图片进行缩放,最后显示图片,分享给大家供大家参考,具体内容如下
1、文章视图中调用Plupload
<?=\common\widgets\Plupload::widget([ 'model'=>$model, 'attribute'=>'cover_img', 'url'=>'/file/upload',//处理文件上传控制器 ])?>
2、\common\widgets\Plupload组件
<?php namespacecommon\widgets; usebackend\assets\UploadAsset; useyii; useyii\helpers\Html; useyii\base\Exception; classPluploadextendsyii\bootstrap\Widget{ public$model; public$attribute; public$name; public$url; private$_html; publicfunctioninit(){ parent::init(); if(!$this->url){ thrownewException('url参数不能为空'); } if(!$this->model){ thrownewException('model属性不能为空'); } if(!$this->attribute){ thrownewException('attribute属性不能为空'); } } publicfunctionrun(){ $model=$this->model; $attribute=$this->attribute; $path=$model->$attribute?$model->$attribute:"/images/noimage.gif";//显示文章图片或者默认图片 $this->_html.='<divclass="form-groupfield-article-author"id="container">'; $this->_html.=Html::activeLabel($model,$attribute); $this->_html.=Html::activeHiddenInput($model,$attribute,['id'=>'hidden_input','value'=>$path]); $this->_html.='<divid="pickfiles"style="height:50px;min-width:50px;max-width:300px;overflow:hidden;"><imgheight="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 namespacebackend\assets; useyii\web\AssetBundle; classUploadAssetextendsAssetBundle { public$basePath='@webroot'; public$baseUrl='@web'; public$css=[ ]; public$js=[ 'js/upload.js' ]; public$depends=[ 'backend\assets\PluploadAsset', ]; }
4、js/upload.js
ajax处理代码
functioninitCoverImageUploader(buttonId,contatinerId,maxFileSize,url,csrfToken){ varuploader=newplupload.Uploader({ runtimes:'html5,flash,silverlight,html4', browse_button:buttonId,//youcanpassanid... container:contatinerId,//...orDOMElementitself 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:"Imagefiles",extensions:"jpg,gif,png"}, {title:"Zipfiles",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('<imgsrc="'+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 namespacebackend\assets; useyii\web\AssetBundle; classPluploadAssetextendsAssetBundle { public$sourcePath='@vendor/moxiecode/plupload'; public$css=[ ]; public$js=[ 'js/plupload.full.min.js', ]; public$depends=[ 'yii\web\JqueryAsset', ]; }
6、FileController
控制器调用模型处理上传文件,并且返回结果
classFileControllerextendsBaseController { publicfunctionactionUpload(){ Yii::$app->response->format=Response::FORMAT_JSON; $model=NewImageUpload(); $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 namespacecommon\models; useyii\base\Exception; useyii\helpers\FileHelper; useyii\web\UploadedFile; classImageUploadextends\yii\base\Object { public$fileInputName='file';//上传表单filename 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;//返回信息 publicfunctiongetMessage(){ return$this->message; } publicfunctiongetUrlPath(){ return$this->urlPath; } publicfunctioninit(){ if(!$this->fileInputName)thrownewException('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; returnfalse; } } $this->_uploadFile=UploadedFile::getInstanceByName($this->fileInputName); if(!$this->_uploadFile){ $this->message='没有找到上传文件'; returnfalse; } if($this->_uploadFile->error){ $this->message='上传失败'; returnfalse; } if(!in_array($this->extension,$this->allowExt)||!in_array($this->type,$this->allowType)){ $this->message='该文件类型不允许上传'; returnfalse; } if($this->_uploadFile->size>$this->maxFileSize){ $this->message='文件过大'; returnfalse; } $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; } publicfunctionsave(){ 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; } /** *获取文件名字 *@returnnull */ publicfunctiongetBaseName(){ if($this->_uploadFile){ return$this->_uploadFile->baseName; }else{ returnnull; } } /** *返回文件后缀 *@returnnull */ publicfunctiongetExtension(){ if($this->_uploadFile){ return$this->_uploadFile->extension; }else{ returnnull; } } /** *返回文件类型 *@returnmixed */ publicfunctiongetType(){ if($this->_uploadFile){ return$this->_uploadFile->type; } returnnull; } /** *生成保持原图纵横比的缩略图,支持.png.jpg.gif *缩略图类型统一为.png格式 *$srcFile原图像文件名称 *$toFile缩略图文件名称,为空覆盖原图像文件 *$toW缩略图宽 *$toH缩略图高 *@returnbool */ publicstaticfunctionCreateThumbnail($srcFile,$toFile="",$toW=100,$toH=100) { if($toFile=="")$toFile=$srcFile; $data=getimagesize($srcFile);//返回含有4个单元的数组,0-宽,1-高,2-图像类型,3-宽高的文本描述。 if(!$data)returnfalse; //将文件载入到资源变量im中 switch($data[2])//1-GIF,2-JPG,3-PNG { case1: if(!function_exists("imagecreatefromgif"))returnfalse; $im=imagecreatefromgif($srcFile); break; case2: if(!function_exists("imagecreatefromjpeg"))returnfalse; $im=imagecreatefromjpeg($srcFile); break; case3: if(!function_exists("imagecreatefrompng"))returnfalse; $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 { case1: imagegif($ni,$toFile); break; case2: imagejpeg($ni,$toFile); break; case3: imagepng($ni,$toFile); break; } ImageDestroy($ni); ImageDestroy($im); return$toFile; } }
以上就是本文的全部内容,希望对大家学习php程序设计有所帮助。