Table des matières
yii2.0使用Plupload实现带缩放功能的多图上传,
您可能感兴趣的文章:
Maison php教程 php手册 yii2.0使用Plupload实现带缩放功能的多图上传,

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

Jun 13, 2016 am 08:49 AM
多图上传

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

本文讲解了plupload的相关代码,实现了ajax多图同时上传,然后将图片进行缩放,最后显示图片,分享给大家供大家参考,具体内容如下

1、文章视图中调用Plupload

<&#63;= \common\widgets\Plupload::widget([
 'model'=>$model,
 'attribute'=>'cover_img',
 'url'=>'/file/upload',//处理文件上传控制器
])&#63;>
Copier après la connexion

2、\common\widgets\Plupload 组件

<&#63;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&#63;$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  src="/static/imghw/default1.png"  data-src="'.$path.'"  class="lazy"     style="max-width:90%".$path.'" / alt="yii2.0使用Plupload实现带缩放功能的多图上传," ></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;
 }

}

Copier après la connexion

3、backend\assets\UploadAsset
注册相关js

<&#63;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',
 ];
}

Copier après la connexion

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="/static/imghw/default1.png"  data-src="'+result.path+'"  class="lazy"+result.path+'"    style="max-width:90%" / alt="yii2.0使用Plupload实现带缩放功能的多图上传," >');
     $('#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();
}

Copier après la connexion

5、backend\assets\PluploadAsset
注册plupload相关资源

<&#63;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',
 ];
}

Copier après la connexion

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()];
  }
 }

}

Copier après la connexion

7、common\models\ImageUpload
模型中对上传文件做了一定的检测,然后将源文件按照一定的比例进行缩放

<&#63;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;
 }
}
Copier après la connexion

以上就是本文的全部内容,希望对大家学习php程序设计有所帮助。

您可能感兴趣的文章:

  • yii实现使用CUploadedFile上传文件的方法
  • yii实现图片上传及缩略图生成的方法
  • Yii结合CKEditor实现图片上传功能
  • yii上传文件或图片实例
  • yii使用activeFileField控件实现上传文件与图片的方法
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)