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

本文讲解了plupload的相关代码，实现了ajax多图同时上传，然后将图片进行缩放，最后显示图

本文讲解了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程序设计有所帮助。