本文實例講述了thinkphp5 框架結(jié)合plupload實現(xiàn)圖片批量上傳功能。分享給大家供大家參考，具體如下：
在extend目錄下新增目錄uploader，并新建類Uploads
|
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
|
<?phpnamespace uploader; class Uploads { public static function upfile($file, $path = 'images', $add_domain = false) { $res = ['errno' => 1, 'errmsg' => '上傳圖片錯誤']; $data = ''; if(!empty($file)) { // 上傳根目錄 $file_path = 'uploads/'; // 如果傳了路徑過來，則加入路徑 if(!empty($path)) { $file_path .= $path .'/'; } if (!file_exists($file_path)) { @mkdir($file_path); } // 上傳 $info = $file->move($file_path); // 獲取后綴 $ext = strtolower($info->getExtension()); //判斷后綴是否合法 $exts = ['jpg', 'png', 'gif', 'jpeg', 'mp4', 'avi', '3gp']; if(in_array($ext, $exts)) { $save_name = $info->getSaveName(); $save_path = "/" . $file_path . $save_name; if($add_domain) { $save_path = "http://www.localhost.com/" . $file_path . $save_name; } $res = ['errno' => 0, 'data' => $save_path]; } else { $res = ['errno' => 1, 'errmsg' => $ext]; } } else { $res = ['errno' => 1, 'errmsg' => '請選擇圖片！']; } return $res; }}?> |
使用
|
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
|
<?php namespace app\backend\controller; use think\Controller;use think\Request;use uploader\Uploads; class Upload extends Controller{ public function upload(Request $request) { $files = $request->file("file"); $updir = $request->post('updir'); $res = Uploads::upfile($files, $updir); return json_encode($res); } public function del_upload(Request $request) { $res = ['errno' => 1, 'errmsg' => '刪除失敗']; $filename = $request->post('filename'); if(!empty($filename)) { @unlink($_SERVER['DOCUMENT_ROOT'] . $filename); $res = ['errno' => 0, 'errmsg' => $filename]; } return json_encode($res); } } ?> |
前端js
|
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
|
var image_files = new Array(); // 多圖片上傳臨時保存$(document).ready(function() { $('.media-picker').each(function() { var el = $(this); var elbtn = el.find('.media-picker-button'); var multi_selection = false; var inputField = el.find('input[type=hidden]'); // 是否多文件上傳 if(elbtn.attr('data-multiple') == 'multiple') { multi_selection = true; } // 上傳目錄 var upload_path = inputField.attr('upload-path'); var uploader = new plupload.Uploader({ runtimes : 'html5,flash,silverlight,html4', browse_button : elbtn.attr('data-id') + '_uploader', multi_selection: multi_selection, auto_start: true, flash_swf_url : '../plugins/plupload/js/Moxie.swf', silverlight_xap_url : '../plugins/plupload/js/Moxie.xap', url : '/backend/upload', filters: { mime_types : [ //只允許上傳圖片和zip,rar文件 { title : "Image files", extensions : "jpg,jpeg,gif,png,bmp" }, { title : "Video files", extensions : "mp4,3gp" } ], max_file_size : '10mb', //最大只能上傳10mb的文件 prevent_duplicates : false //不允許選取重復(fù)文件 }, init: { PostInit: function() {}, BeforeUpload: function(up, file) { up.setOption('multipart_params', {'updir': upload_path}) }, FilesAdded: function(up) { up.start(); //選擇完后直接上傳 }, FileUploaded: function(up, file, info) { if (info.status == 200) { var file_type = file.type; var is_image = file_type.indexOf('image'); var is_video = file_type.indexOf('video'); // 解析返回的數(shù)據(jù) var result = JSON.parse(info.response); var img_list = ""; if(result.errno == 0) { // 返回的圖片上傳結(jié)果 var file_name = result.data; if(multi_selection) { // 多圖片上傳不考慮視頻 if (is_image > -1) { // 存入臨時數(shù)組 image_files.push(file_name); inputField.val(JSON.stringify(image_files)); for (var i = 0; i < image_files.length; i++) { img_list += "<li><img src='"+image_files[i]+"' /><span class='delete-image'>?</span><p>"+image_files[i]+"</p></li>"; } } } else { inputField.val(file_name); if (is_image > -1) { img_list = "<li><img src='"+result.data+"' /><span class='delete-image'>?</span><p>"+result.data+"</p></li>"; } if (is_video > -1) { img_list = "<li><video controls src='"+result.data+"'></video><span class='delete-image'>?</span><p>"+result.data+"<p></li>"; } } el.find('.image-list').html(img_list); } else { alert(result.errmsg); } } else { alter(info.response); } }, Error: function(up, err) { alert(err.response); } } }) uploader.init(); // 刪除 if (multi_selection) { el.on('click', '.delete-image', function() { var file_name = inputField.val(); var elDel = $(this); // 得到filename var current_file_name = elDel.next('p').html(); // 刪除當(dāng)前的父級li elDel.parent().remove(); // 重新賦值數(shù)組 var new_image_files = new Array(); if (image_files != '') { new_image_files = image_files; } else { new_image_files = $.parseJSON(file_name); } // 去掉數(shù)組中的當(dāng)前值 for(var i in new_image_files) { if(new_image_files[i] == current_file_name) { new_image_files.splice(i,1); break; } } $.ajax({ type: "POST", url: "/backend/del_upload", data: "filename=" + current_file_name, success: function(msg) { console.log(msg) } }); inputField.val(JSON.stringify(new_image_files)); }); } else { el.on('click', '.delete-image', function(){ // 顯示值為空 var file_name = inputField.val(); el.find('.image-list').html(''); inputField.val(''); $.ajax({ type: "POST", url: "/backend/del_upload", data: "filename=" + file_name, success: function(msg) { console.log(msg) } }); }); } })}) |
希望本文所述對大家基于ThinkPHP框架的PHP程序設(shè)計有所幫助。
原文鏈接：https://blog.csdn.net/tang05709/article/details/85261152
