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 相关文章推荐
汉字转化为拼音(php版)
Oct 09 PHP
PHP下通过file_get_contents的代理使用方法
Feb 16 PHP
调试一段PHP程序时遇到的三个问题
Jan 17 PHP
php 多关键字 高亮显示实现代码
Apr 23 PHP
用php实现选择排序的解决方法
May 04 PHP
PHP文件锁定写入实例解析
Jul 14 PHP
初识Laravel
Oct 30 PHP
php字符串过滤与替换小结
Jan 26 PHP
php银联网页支付实现方法
Mar 04 PHP
php获取从html表单传递数组的方法
Mar 20 PHP
php中序列化与反序列化详解
Feb 13 PHP
PHP扩展安装方法步骤解析
Nov 24 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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
PHP 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
浅析php单例模式
2014/11/25 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
webpack3之loader全解析
2017/10/26 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Python的print用法示例
2014/02/11 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
python3.x实现base64加密和解密
2019/03/28 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
婚礼主持词
2014/03/13 职场文书
初中班主任寄语
2014/04/04 职场文书
探亲假请假条
2014/04/11 职场文书
个人委托书
2014/07/31 职场文书
新兵入伍心得体会
2014/09/04 职场文书
检讨书范文大全
2015/05/07 职场文书
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers