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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了yii2.0使用Plupload实现带缩放功能的多图上传，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8250字，纯文字阅读大概需要12分钟。

内容图文

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

内容总结

以上是互联网集市为您收集整理的yii2.0使用Plupload实现带缩放功能的多图上传全部内容，希望文章能够帮你解决yii2.0使用Plupload实现带缩放功能的多图上传所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/279547.html

来源：【匿名】

【上一篇】PHP内核探索之解释器的执行过程【下一篇】PHP 5 数据对象 (PDO) 抽象层与 Oracle

更多 ►

【yii2.0使用Plupload实现带缩放功能的多图上传】教程文章相关的互联网学习教程文章

yii2 requirements.php 文件

yii-basic-app-2.0.0\basic requirements.php 文件程序必要条件检查脚本。检查框架目录如果不存在报错误信息 if (!is_dir($frameworkPath)) { 引入检查类 require_once($frameworkPath . ‘/requirements/YiiRequirementChecker.php‘); 定义，数据库，缓存等插件的信息用检查类检查并绘制出来。原文：http://blog.csdn.net/wide288/article/details/40893605

yii2手动添加插件PHPExcel【代码】【图】

1.下载地址：https://github.com/PHPOffice/PHPExcel2.解压并修改文件名为phpexcel之后在yii项目的vendor目录下创建一个文件夹命名为phpoffice把phpexcel文件放到phpoffic文件夹下此时查看vendor\phpoffice\phpexcel目录下会看到这些文件 3.到vendor\composer目录下修改文件autoload_namespaces.php，添加一句代码注册命名空间‘PHPExcel‘ => array($vendorDir.‘/phpoffice/phpexcel/Classes‘),如图：接下来就可以开始使用了；...

Yii2 Day 8 配置多版本PHP【代码】

起因Yii2对最低要求PHP5.4，但是目前很多空间或者主机，PHP的版本还停留在5.3及以下。这个时候就面临两个选择：升级PHP版本再安装一个高版本PHP如果已经有站点在这个服务器上运行的话，贸然升级PHP版本，很可能让那些使用了过时的函数，不规范用法的PHP程序报一堆警告或者错误，那就无可挽回啦。安全起见，再安装一个高版本PHP比较保守些。那么如果让Nginx或者Apchce使用不同版本的PHP呢？那就是PHP-FPM.PHP-FPMFastCGI Process Ma...

yii2:如果获取config/web.php配置的值？【代码】

return [‘version‘ => ‘1.0.1‘,‘category-map‘ => [1 => ‘样式1‘,2 => ‘样式2‘,3 => ‘样式3‘,4 => ‘样式4‘,5 => ‘样式5‘,6 => ‘样式6‘] ];配置在@app/config/params.php里，读取方式为Yii::$app->params[‘paramsName‘]。比如Yii::$app->params[‘sitename‘]原文：http://www.cnblogs.com/achengmu/p/6599077.html

php7.2版本+yii2会报错【图】

FastCGI sent in stderr: "PHP message: PHP Fatal error: Cannot use ‘Object‘ as class name as it is reserved in /home/leo/htdocs/oa/vendor/yiisoft/yii2/base/Object.php on line 77这个错误是yii2框架的错误了。也就是说不能使用Object作为类名。因为之前的PHP7和PHP5.6版本运行都没有错误，所以应该是更新了PHP版本的原因。再来看看PHP 7.0.2 Beta 3版本的新特性：最后一条，在任何情况下都不再允许使用object作为类...

Yii2 PHPExcel在linux环境下导出报500错误【代码】

断点调试后发现是因为这句报错header(‘Content-Type : application/vnd.ms-excel‘);删除后正常输出下载原文：https://www.cnblogs.com/fpcing/p/10364348.html

Yii2 在php 7.2环境下运行，提示 Cannot use ‘Object’ as class name【代码】

出错原因是:Object是php7.2中的保留类名，不可以使用Object作为类的名称。The object name was previously soft-reserved in PHP 7.0. This is now hard-reserved, prohibiting it from being used as a class, trait, or interface name.执行composer update更新 Yii2的版本.从Object.php文件的注释(在本地中的路径是vendor/yiisoft/yii2/base/Object.php)，从 Yii2 2.0.13版本开始，已经弃用了 Object类，使用BaseObject 进行代替...

php的数据库操作（微擎，tp，yii2）【代码】

微擎数据库操作关键字查询pdo_get pdo_getcolumn pdo_getall pdo_getslice pdo_fetchcolumn pdo_fetchall 示例： array | boolean pdo_get($tablename, $condition = array(), $fields = array());//表名，条件，字段关键字增加pdo_insert示例：$result = pdo_insert($tablename,$insert_data);//表名，要插入的数据（数组形式）关键字修改pdo_update 示例：$result = pdo_update($tablename,$update_data,$condition);//表名...

设计模式-yii2或者php中，关于事件与行为

我们在做项目的时候，怎么去判断这一PHP类，作为事件还是行为呢？大家又是怎么理解这两个设计模式的使用的？欢迎大家给出自己的见解，我们一起讨论！回复内容：我们在做项目的时候，怎么去判断这一PHP类，作为事件还是行为呢？大家又是怎么理解这两个设计模式的使用的？欢迎大家给出自己的见解，我们一起讨论！行为是事件的组合包，当把一个行为attach到一个Component时，其实是把该Behavior对下下注册的Events添加到当前对象．

yii2缓存的介绍和使用yii2.0中文手册yii2.0教程yii中文手册

作者：白狼出处：http://www.manks.top/yii2_cache.html 本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。一个好的框架是肯定离不开缓存的使用，相反，一个没有缓存的框架也肯定不是一个好框架，好像是一个意思，不管了，我们先来看看yii2中是如何使用缓存的吧。又是到我们第一步操作的时候了，我们先来配置组件。方便起见，我们的缓存组件配置在comm...

浅析Yii2缓存的使用

一个好的框架是肯定离不开缓存的使用，相反，一个没有缓存的框架也肯定不是一个好框架，好像是一个意思，不管了，我们先来看看yii2中是如何使用缓存的吧。又是到我们第一步操作的时候了，我们先来配置组件。方便起见，我们的缓存组件配置在common\config\main.php文件，先来简单配置下文件缓存components => [ cache => [ class => yii\caching\FileCache, cachePath => @runtime/cache2, ], ],所谓的文件缓存，其实就是把我们...

Yii2框架的csrf验证原理分析及token缓存解决方案

本文主要分三个部分，首先简单介绍csrf，接着对照源码重点分析一下yii框架的验证原理，最后针对页面缓存导致的token被缓存提出一种可行的方案。涉及的知识点会作为附录附于文末。感兴趣的朋友了解一下吧。1.CSRF描述CSRF全称为“Cross-Site Request Forgery”，是在用户合法的SESSION内发起的攻击。黑客通过在网页中嵌入Web恶意请求代码，并诱使受害者访问该页面，当页面被访问后，请求在受害者不知情的情况下以受害者的合法身份发...

什么是yii2的缓存依赖？如何使用缓存依赖？

本篇文章给大家带来的内容是介绍什么是yii2的缓存依赖？如何使用缓存依赖？有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。概述缓存是Yii2的强大特性之一，合理使用缓存技术可以有效地减小服务器的访问压力。Yii2最基本的缓存包括数据缓存、片段缓存、页面缓存和HTTP缓存，这部分内容在官方文档中有更加详细的说明，这里不再赘述，如有需要可以参考Yii2官方开发文档中的缓存部分。页面缓存数据缓存与片段缓存都是...

如何使用yii2的缓存依赖特性（代码示例）

本篇文章给大家带来的内容是关于如何使用yii2的缓存依赖特性（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。缓存是Yii2的强大特性之一，合理使用缓存技术可以有效地减小服务器的访问压力。Yii2最基本的缓存包括数据缓存、片段缓存、页面缓存和HTTP缓存，这部分内容在官方文档中有更加详细的说明，这里不再赘述，如有需要可以参考Yii2官方开发文档中的缓存部分。页面缓存数据缓存与片段缓存都是针对...

浅析Yii2缓存的使用_PHP

Yii2 一个好的框架是肯定离不开缓存的使用，相反，一个没有缓存的框架也肯定不是一个好框架，好像是一个意思，不管了，我们先来看看yii2中是如何使用缓存的吧。又是到我们第一步操作的时候了，我们先来配置组件。方便起见，我们的缓存组件配置在common\config\main.php文件，先来简单配置下文件缓存components => [ cache => [ class => yii\caching\FileCache, cachePath => @runtime/cache2, ], ],所谓的文件缓存，其实就...

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

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【yii2.0使用Plupload实现带缩放功能的多图上传】教程文章相关的互联网学习教程文章

功能 - 相关标签

PHP - 技术教程分类

PHP - 最新教程

PHP - 最热教程