本文講解了plupload的相關(guān)代碼，實現(xiàn)了ajax多圖同時上傳，然后將圖片進行縮放，最后顯示圖片，分享給大家供大家參考，具體內(nèi)容如下
1、文章視圖中調(diào)用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參數(shù)不能為空'); } 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
注冊相關(guān)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相關(guān)資源
<?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
控制器調(diào)用模型處理上傳文件，并且返回結(jié)果
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;//返回狀態(tài) 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 = '沒有權(quán)限創(chuàng)建'.$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 * 縮略圖類型統(tǒng)一為.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個單元的數(shù)組，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) { //重采樣拷貝部分圖像并調(diào)整大小 可保持較好的清晰度 imagecopyresampled($ni, $im, 0, 0, 0, 0, $ftoW, $ftoH, $srcW, $srcH); } else { //拷貝部分圖像并調(diào)整大小 $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; }} 以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)php程序設(shè)計有所幫助。
