本文讲解了plupload的相关代码，实现了ajax多图同时上传，然后将图片进行缩放，最后显示图片，分享给大家供大家参考，具体内容如下
1、文章视图中调用Plupload
|
1
2
3
4
5
|
<?= \common\widgets\Plupload::widget([ 'model'=>$model, 'attribute'=>'cover_img', 'url'=>'/file/upload',//处理文件上传控制器])?> |
2、\common\widgets\Plupload 组件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<?phpnamespace 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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<?phpnamespace 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处理代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
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相关资源
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<?phpnamespace 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
控制器调用模型处理上传文件，并且返回结果
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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
模型中对上传文件做了一定的检测，然后将源文件按照一定的比例进行缩放
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
|
<?phpnamespace 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程序设计有所帮助。
