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


Posted in PHP onDecember 22, 2015

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

PHP 相关文章推荐
在WIN98下以apache模块方式安装php
Oct 09 PHP
PHP数据库链接类(PDO+Access)实例分享
Dec 05 PHP
Laravel 5框架学习之路由、控制器和视图简介
Apr 07 PHP
php递归实现无限分类的方法
Jul 28 PHP
PHP使用curl模拟post上传及接收文件的方法
Mar 04 PHP
PHP is_array() 检测变量是否是数组的实现方法
Jun 13 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
Dec 24 PHP
如何离线执行php任务
Feb 21 PHP
PHP实现求解最长公共子串问题的方法
Nov 17 PHP
php微信开发之图片回复功能
Jun 14 PHP
php传值和传引用的区别点总结
Nov 19 PHP
php+iframe 实现上传文件功能示例
Mar 04 PHP
PHP输入流php://input实例讲解
Dec 22 #PHP
服务器迁移php版本不同可能诱发的问题
Dec 22 #PHP
php上传图片并压缩的实现方法
Dec 22 #PHP
PHP实现图片上传并压缩
Dec 22 #PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
Dec 21 #PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
Dec 21 #PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
Dec 21 #PHP
You might like
用PHP+MySql编写聊天室
2006/10/09 PHP
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
微信小程序如何连接Java后台
2019/08/08 Javascript
js实现查询商品案例
2020/07/22 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
python检测某个变量是否有定义的方法
2015/05/20 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
Python制作Windows系统服务
2017/03/25 Python
如何用python整理附件
2018/05/13 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
python实现串口自动触发工作的示例
2019/07/02 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
解决python 上传图片限制格式问题
2019/10/30 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
同程旅游英文网站:LY.com
2018/11/13 全球购物
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python