thinkphp5 框架结合plupload实现图片批量上传功能示例

薄如秋水

本文实例讲述了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(!empty($file)) {
   
9.    // 上传根目录
   
10.    $file_path = 'uploads/';
    
11.    // 如果传了路径过来，则加入路径
    
12.    if(!empty($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(!empty($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. })

复制代码

更多关于thinkPHP相关内容感兴趣的读者可查看本站专题：《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。
希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

堵婉秀

感谢楼主，顶。

野型在

感谢楼主分享。