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

2024-03-23 21:17:02 246

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

1、文章视图中调用Plupload

<?=\common\widgets\Plupload::widget([
'model'=>$model,
'attribute'=>'cover_img',
'url'=>'/file/upload',//处理文件上传控制器
])?>

2、\common\widgets\Plupload组件

<?php
namespacecommon\widgets;

usebackend\assets\UploadAsset;
useyii;
useyii\helpers\Html;
useyii\base\Exception;

classPluploadextendsyii\bootstrap\Widget{
public$model;
public$attribute;
public$name;
public$url;

private$_html;


publicfunctioninit(){
parent::init();
if(!$this->url){
thrownewException('url参数不能为空');
}
if(!$this->model){
thrownewException('model属性不能为空');
}
if(!$this->attribute){
thrownewException('attribute属性不能为空');
}
}
publicfunctionrun(){
$model=$this->model;
$attribute=$this->attribute;
$path=$model->$attribute?$model->$attribute:"/images/noimage.gif";//显示文章图片或者默认图片
$this->_html.='<divclass="form-groupfield-article-author"id="container">';
$this->_html.=Html::activeLabel($model,$attribute);
$this->_html.=Html::activeHiddenInput($model,$attribute,['id'=>'hidden_input','value'=>$path]);
$this->_html.='<divid="pickfiles"style="height:50px;min-width:50px;max-width:300px;overflow:hidden;"><imgheight="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
namespacebackend\assets;

useyii\web\AssetBundle;

classUploadAssetextendsAssetBundle
{
public$basePath='@webroot';
public$baseUrl='@web';
public$css=[
];
public$js=[
'js/upload.js'
];
public$depends=[
'backend\assets\PluploadAsset',
];
}

4、js/upload.js
ajax处理代码

functioninitCoverImageUploader(buttonId,contatinerId,maxFileSize,url,csrfToken){
varuploader=newplupload.Uploader({
runtimes:'html5,flash,silverlight,html4',
browse_button:buttonId,//youcanpassanid...
container:contatinerId,//...orDOMElementitself
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:"Imagefiles",extensions:"jpg,gif,png"},
{title:"Zipfiles",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('<imgsrc="'+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

namespacebackend\assets;

useyii\web\AssetBundle;


classPluploadAssetextendsAssetBundle
{
public$sourcePath='@vendor/moxiecode/plupload';

public$css=[
];
public$js=[
'js/plupload.full.min.js',
];
public$depends=[
'yii\web\JqueryAsset',
];
}

6、FileController
控制器调用模型处理上传文件，并且返回结果

classFileControllerextendsBaseController
{
publicfunctionactionUpload(){
Yii::$app->response->format=Response::FORMAT_JSON;
$model=NewImageUpload();
$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

namespacecommon\models;

useyii\base\Exception;
useyii\helpers\FileHelper;
useyii\web\UploadedFile;

classImageUploadextends\yii\base\Object
{
public$fileInputName='file';//上传表单filename
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;//返回信息

publicfunctiongetMessage(){
return$this->message;
}
publicfunctiongetUrlPath(){
return$this->urlPath;
}

publicfunctioninit(){
if(!$this->fileInputName)thrownewException('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;
returnfalse;
}
}

$this->_uploadFile=UploadedFile::getInstanceByName($this->fileInputName);
if(!$this->_uploadFile){
$this->message='没有找到上传文件';
returnfalse;
}
if($this->_uploadFile->error){
$this->message='上传失败';
returnfalse;
}

if(!in_array($this->extension,$this->allowExt)||!in_array($this->type,$this->allowType)){
$this->message='该文件类型不允许上传';
returnfalse;
}

if($this->_uploadFile->size>$this->maxFileSize){
$this->message='文件过大';
returnfalse;
}

$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;
}

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

/**
*获取文件名字
*@returnnull
*/
publicfunctiongetBaseName(){
if($this->_uploadFile){
return$this->_uploadFile->baseName;
}else{
returnnull;
}
}
/**
*返回文件后缀
*@returnnull
*/
publicfunctiongetExtension(){
if($this->_uploadFile){
return$this->_uploadFile->extension;
}else{
returnnull;
}
}
/**
*返回文件类型
*@returnmixed
*/
publicfunctiongetType(){
if($this->_uploadFile){
return$this->_uploadFile->type;
}
returnnull;
}

/**
*生成保持原图纵横比的缩略图，支持.png.jpg.gif
*缩略图类型统一为.png格式
*$srcFile原图像文件名称
*$toFile缩略图文件名称，为空覆盖原图像文件
*$toW缩略图宽
*$toH缩略图高
*@returnbool
*/
publicstaticfunctionCreateThumbnail($srcFile,$toFile="",$toW=100,$toH=100)
{
if($toFile=="")$toFile=$srcFile;

$data=getimagesize($srcFile);//返回含有4个单元的数组，0-宽，1-高，2-图像类型，3-宽高的文本描述。
if(!$data)returnfalse;
//将文件载入到资源变量im中
switch($data[2])//1-GIF，2-JPG，3-PNG
{
case1:
if(!function_exists("imagecreatefromgif"))returnfalse;
$im=imagecreatefromgif($srcFile);
break;
case2:
if(!function_exists("imagecreatefromjpeg"))returnfalse;
$im=imagecreatefromjpeg($srcFile);
break;
case3:
if(!function_exists("imagecreatefrompng"))returnfalse;
$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
{
case1:
imagegif($ni,$toFile);
break;
case2:
imagejpeg($ni,$toFile);
break;
case3:
imagepng($ni,$toFile);
break;
}
ImageDestroy($ni);
ImageDestroy($im);
return$toFile;
}
}

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

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

热门推荐

随机推荐