加入收藏 | 设为首页 | 会员中心 | 我要投稿 安卓应用网 (https://www.0791zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程开发 > PHP > 正文

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

发布时间:2020-05-23 17:52:32 所属栏目:PHP 来源:互联网
导读:这篇文章主要介绍了yii2.0使用Plupload实现带缩放功能的多图上传的相关资料,需要的朋友可以参考下

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

1、文章视图中调用Plupload

$model,'attribute'=>'cover_img','url'=>'/file/upload',//处理文件上传控制器 ])?>

2、commonwidgetsPlupload 组件

use backendassetsUploadAsset;
use yii;
use yiihelpersHtml;
use yiibaseException;

class Plupload extends yiibootstrapWidget{
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;">yii2.0使用Plupload实现带缩放功能的多图上传';
$this->_html.=' ';
UploadAsset::register($this->view);
$this->view->registerJs(
'$(function(){
initCoverImageUploader("pickfiles","container","2mb","'.$this->url.'","'.Yii::$app->request->getCsrfToken().'");
});'
);

return $this->_html;
}

}

3、backendassetsUploadAsset

注册相关js

use yiiwebAssetBundle;

class UploadAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
];
public $js = [
'js/upload.js'
];
public $depends = [
'backendassetsPluploadAsset',];
}

4、js/upload.js

ajax处理代码

'); $('#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、backendassetsPluploadAsset

注册plupload相关资源

namespace backendassets;

use yiiwebAssetBundle;

class PluploadAsset extends AssetBundle
{
public $sourcePath = '@vendor/moxiecode/plupload';

public $css = [
];
public $js = [
'js/plupload.full.min.js',];
public $depends = [
'yiiwebJqueryAsset',];
}

6、FileController

控制器调用模型处理上传文件,并且返回结果

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、commonmodelsImageUpload

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

namespace commonmodels;

use yiibaseException;
use yiihelpersFileHelper;
use yiiwebUploadedFile;

class ImageUpload extends yiibaseObject
{
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/x-png','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;

(编辑:安卓应用网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读