本文实例讲述了thinkphp5 框架结合plupload实现图片批量上传功能，分享给大家供大家参考，具体如下：

在extend目录下新增目录uploader，并新建类Uploads

1. <?php 
2. namespace uploader; 
3.    
4. class Uploads { 
5.  public static function upfile($file, $path = 'images', $add_domain = false) { 
6.   $res = ['errno' => 1, 'errmsg' => '上传图片错误']; 
7.   $data = ''; 
8.   if(!emptyempty($file)) { 
9.    // 上传根目录 
10.    $file_path = 'uploads/'; 
11.    // 如果传了路径过来，则加入路径 
12.    if(!emptyempty($path)) { 
13.     $file_path .= $path .'/'; 
14.    } 
15.    if (!file_exists($file_path)) { 
16.     @mkdir($file_path); 
17.    } 
18.    // 上传 
19.    $info = $file->move($file_path); 
20.    // 获取后缀 
21.    $ext = strtolower($info->getExtension()); 
22.    //判断后缀是否合法 
23.    $exts = ['jpg', 'png', 'gif', 'jpeg', 'mp4', 'avi', '3gp']; 
24.    if(in_array($ext, $exts)) { 
25.     $save_name = $info->getSaveName(); 
26.     $save_path = "/" . $file_path . $save_name; 
27.     if($add_domain) { 
28.      $save_path = "http://www.localhost.com/" . $file_path . $save_name; 
29.     }  
30.     $res = ['errno' => 0, 'data' => $save_path]; 
31.    } else { 
32.     $res = ['errno' => 1, 'errmsg' => $ext]; 
33.    } 
34.   } else { 
35.    $res = ['errno' => 1, 'errmsg' => '请选择图片！']; 
36.   } 
37.     
38.   return $res; 
39.  } 
40. } 
41. ?> 

使用

1. <?php 
2.    
3. namespace app\backend\controller; 
4.    
5. use think\Controller; 
6. use think\Request; 
7. use uploader\Uploads; 
8.    
9. class Upload extends Controller 
10. { 
11.  public function upload(Request $request) { 
12.   $files = $request->file("file"); 
13.   $updir = $request->post('updir'); 
14.   $res = Uploads::upfile($files, $updir); 
15.   return json_encode($res); 
16.  } 
17.    
18.  public function del_upload(Request $request) { 
19.   $res = ['errno' => 1, 'errmsg' => '删除失败']; 
20.   $filename = $request->post('filename'); 
21.   if(!emptyempty($filename)) { 
22.    @unlink($_SERVER['DOCUMENT_ROOT'] . $filename); 
23.    $res = ['errno' => 0, 'errmsg' => $filename]; 
24.   } 
25.   return json_encode($res); 
26.  } 
27.    
28. } 
29.    
30. ?> 

前端js

1. var image_files = new Array(); // 多图片上传临时保存 
2. $(document).ready(function() { 
3.  $('.media-picker').each(function() { 
4.   var el = $(this); 
5.   var elbtn = el.find('.media-picker-button'); 
6.   var multi_selection = false; 
7.   var inputField = el.find('input[type=hidden]'); 
8.   // 是否多文件上传 
9.   if(elbtn.attr('data-multiple') == 'multiple') { 
10.    multi_selection = true; 
11.   } 
12.   // 上传目录 
13.   var upload_path = inputField.attr('upload-path'); 
14.   var uploader = new plupload.Uploader({ 
15.    runtimes : 'html5,flash,silverlight,html4', 
16.    browse_button : elbtn.attr('data-id') + '_uploader',  
17.    multi_selection: multi_selection, 
18.    auto_start: true, 
19.    flash_swf_url : '../plugins/plupload/js/Moxie.swf', 
20.    silverlight_xap_url : '../plugins/plupload/js/Moxie.xap', 
21.    url : '/backend/upload', 
22.      
23.    filters: { 
24.     mime_types : [ //只允许上传图片和zip,rar文件 
25.     { title : "Image files", extensions : "jpg,jpeg,gif,png,bmp" },  
26.     { title : "Video files", extensions : "mp4,3gp" } 
27.     ], 
28.     max_file_size : '10mb', //最大只能上传10mb的文件 
29.     prevent_duplicates : false //不允许选取重复文件 
30.    }, 
31.    
32.    init: {  
33.     PostInit: function() {}, 
34.    
35.     BeforeUpload: function(up, file) { 
36.      up.setOption('multipart_params', {'updir': upload_path}) 
37.     }, 
38.    
39.     FilesAdded: function(up) { 
40.      up.start(); //选择完后直接上传 
41.     }, 
42.    
43.     FileUploaded: function(up, file, info) { 
44.      if (info.status == 200) 
45.      { 
46.       var file_type = file.type; 
47.       var is_image = file_type.indexOf('image'); 
48.       var is_video = file_type.indexOf('video'); 
49.       // 解析返回的数据 
50.       var result = JSON.parse(info.response); 
51.       var img_list = ""; 
52.       if(result.errno == 0) { 
53.        // 返回的图片上传结果 
54.        var file_name = result.data;  
55.        if(multi_selection) { 
56.         // 多图片上传不考虑视频 
57.         if (is_image > -1) { 
58.          // 存入临时数组 
59.          image_files.push(file_name); 
60.          inputField.val(JSON.stringify(image_files)); 
61.          for (var i = 0; i < image_files.length; i++) { 
62.           img_list += "<li><img src='"+image_files[i]+"' /><span class='delete-image'>✖</span><p>"+image_files[i]+"</p></li>"; 
63.          } 
64.         } 
65.        } else { 
66.         inputField.val(file_name); 
67.         if (is_image > -1) { 
68.          img_list = "<li><img src='"+result.data+"' /><span class='delete-image'>✖</span><p>"+result.data+"</p></li>"; 
69.         } 
70.         if (is_video > -1) {  
71.          img_list = "<li><video controls src='"+result.data+"'></video><span class='delete-image'>✖</span><p>"+result.data+"<p></li>"; 
72.         } 
73.        } 
74.        el.find('.image-list').html(img_list); 
75.       } else { 
76.        alert(result.errmsg); 
77.       } 
78.      } 
79.      else 
80.      { 
81.       alter(info.response); 
82.      }  
83.     }, 
84.    
85.     Error: function(up, err) { 
86.      alert(err.response); 
87.     } 
88.    } 
89.   }) 
90.   uploader.init(); 
91.    
92.    
93.   // 删除 
94.   if (multi_selection) { 
95.    el.on('click', '.delete-image', function() { 
96.     var file_name = inputField.val(); 
97.     var elDel = $(this); 
98.     // 得到filename 
99.     var current_file_name = elDel.next('p').html(); 
100.     // 删除当前的父级li 
101.     elDel.parent().remove(); 
102.     // 重新赋值数组 
103.     var new_image_files = new Array(); 
104.     if (image_files != '') { 
105.      new_image_files = image_files; 
106.     } else { 
107.      new_image_files = $.parseJSON(file_name); 
108.     } 
109.     // 去掉数组中的当前值 
110.     for(var i in new_image_files) { 
111.      if(new_image_files[i] == current_file_name) { 
112.       new_image_files.splice(i,1); 
113.       break; 
114.      } 
115.     } 
116.     $.ajax({ 
117.       type: "POST", 
118.       url: "/backend/del_upload", 
119.       data: "filename=" + current_file_name, 
120.       success: function(msg) { 
121.         console.log(msg) 
122.       } 
123.     }); 
124.     inputField.val(JSON.stringify(new_image_files)); 
125.    }); 
126.   } else { 
127.    el.on('click', '.delete-image', function(){ 
128.     // 显示值为空 
129.     var file_name = inputField.val(); 
130.     el.find('.image-list').html(''); 
131.     inputField.val(''); 
132.     $.ajax({ 
133.      type: "POST", 
134.      url: "/backend/del_upload", 
135.      data: "filename=" + file_name, 
136.      success: function(msg) { 
137.        console.log(msg) 
138.      } 
139.     }); 
140.    }); 
141.   } 
142.  }) 
143. })

Tags: thinkphp5图片批量上传 plupload

分享到：