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

前端技术 2023/09/09 PHP

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

本文地址：https://www.stayed.cn/item/24875

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案