在本篇文章里小编给大家整理的是关于php结合layui前端实现多图上传的实例内容，有需要的朋友们可以参考下。

php结合layui前端实现多图上传

前端html代码

1. <div class="layui-upload"> 
2.  
3.   <button type="button" class="layui-btn layui-btn-normal" id="testList">请选择图片</button> 
4.  
5.   <span class="num_pic"></span> 
6.  
7.   <div class="layui-upload-list"> 
8.  
9.     <table class="layui-table"> 
10.  
11.       <thead> 
12.  
13.         <tr> 
14.  
15.           <th>文件名</th> 
16.  
17.           <th id="pic">图片预览</th> 
18.  
19.           <th>大小</th> 
20.  
21.           <th>状态</th> 
22.  
23.           <th id="cao">操作</th> 
24.  
25.         </tr> 
26.  
27.       </thead> 
28.  
29.       <tbody id="demoList"></tbody> 
30.  
31.     </table> 
32.  
33.   </div> 
34.  
35.   <button type="button" class="layui-btn" id="testListAction">开始上传</button> 
36.  
37.     <span class="num_pic"></span> 
38.  
39. </div> 

js 代码

1. <script type="text/javascript"> 
2.  
3.   layui.use('upload', function() { 
4.  
5.     var $ = layui.jquery, 
6.  
7.       upload = layui.upload; 
8.  
9.     //多文件列表示例 
10.  
11.     var demoListView = $('#demoList'), 
12.  
13.       uploadListIns = upload.render({ 
14.  
15.         elem: '#testList', 
16.  
17.         url: "{url('pic/index/upload')}", 
18.  
19.         accept: 'images', 
20.  
21.         acceptMime: 'image/*', 
22.  
23.         size: 8192, 
24.  
25.         multiple: true, 
26.  
27.         number: 400, 
28.  
29.         auto: false, 
30.  
31.         exts: 'jpg|png|jpeg', 
32.  
33.         bindAction: '#testListAction', 
34.  
35.         choose: function(obj) { 
36.  
37.           var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列 
38.  
39.           //读取本地文件 
40.  
41.           obj.preview(function(index, file, result) { 
42.  
43.             var tr = $(['<tr id="upload-' + index + '">', '<td>' + file.name + '</td>', '<td><img src="' + result + '" alt="' + file.name + '" style="width: 100px;height: 40px;"></td>', '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>', '<td>等待上传</td>', '<td>', '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>', '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>', '</td>', '</tr>'].join('')); 
44.  
45.             //单个重传 
46.  
47.             tr.find('.demo-reload').on('click', function() { 
48.  
49.               obj.upload(index, file); 
50.  
51.               $("#upload-" + index).find("td").eq(2).html((file.size / 1014).toFixed(1) + 'kb'); 
52.  
53.             }); 
54.  
55.             //删除 
56.  
57.             tr.find('.demo-delete').on('click', function() { 
58.  
59.               delete files[index]; //删除对应的文件 
60.  
61.               tr.remove(); 
62.  
63.               uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选 
64.  
65.             }); 
66.  
67.             demoListView.append(tr); 
68.  
69.             $(".num_pic").text("总共【" + demoListView.find("tr").length + "】张图片"); 
70.  
71.           }); 
72.  
73.         }, 
74.  
75.         done: function(res, index, upload) { 
76.  
77.           if(res.code == 0) { //上传成功 
78.  
79.             $("#cao").text("地址"); 
80.  
81.             var tr = demoListView.find('tr#upload-' + index), 
82.  
83.               tds = tr.children(); 
84.  
85.             tds.eq(3).html('<span style="color: #5FB878;">上传成功</span>'); 
86.  
87.             tds.eq(4).html('<input type="text" name="imgs[]" value="' + res.file + '" class="layui-input" />'); //清空操作 
88.  
89.             return delete this.files[index]; //删除文件队列已经上传成功的文件 
90.  
91.           } 
92.  
93.           this.error(index, upload); 
94.  
95.         }, 
96.  
97.         allDone: function(obj) { //当文件全部被提交后，才触发 
98.  
99.           layer.msg("上传文件数量：【" + obj.total + "】张，上传成功：【" + obj.successful + "】张，失败：【" + obj.aborted + "】", { 
100.  
101.             time: 3000 
102.  
103.           }); 
104.  
105.           console.log(obj.total); //得到总文件数 
106.  
107.           console.log(obj.successful); //请求成功的文件数 
108.  
109.           console.log(obj.aborted); //请求失败的文件数 
110.  
111.         }, 
112.  
113.         error: function(index, upload) { 
114.  
115.           var tr = demoListView.find('tr#upload-' + index), 
116.  
117.             tds = tr.children(); 
118.  
119.           tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>'); 
120.  
121.           tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传 
122.  
123.         } 
124.  
125.       }); 
126.  
127.   }); 
128.  
129. </script> 

后端代码

1. public function uploadAction(){ 
2.  
3.     $file=$_FILES['file']; 
4.  
5.     $root_url = 'uploadfiles/pic/image/'; 
6.  
7.     if (!is_uploaded_file($file['tmp_name'])){ 
8.  
9.       $data = array('code'=>1,'msg'=>"错误"); 
10.  
11.       exit(json_encode($data,0)); 
12.  
13.     } 
14.  
15.    /* $root_url.=date('Ymd').'/';*/ 
16.  
17.     $ext = pathinfo($file['name']); 
18.  
19.     $num=makenum($this->memberinfo['id']); 
20.  
21.     $root_url.=$num.'/'; 
22.  
23.     if (!is_dir($root_url)) { 
24.  
25.       mkdir($root_url,0777, true); 
26.  
27.     } 
28.  
29.     $pa=file_list::get_file_list($root_url); 
30.  
31.     $na=count($pa) + 1; 
32.  
33.     if ($na<10){ 
34.  
35.       $name=$num.'-000'.$na; 
36.  
37.     }elseif($na<100){ 
38.  
39.       $name=$num.'-00'.$na; 
40.  
41.     }elseif($na<1000){ 
42.  
43.       $name=$num.'-0'.$na; 
44.  
45.     }else{ 
46.  
47.       $name=$num.'-'.$na; 
48.  
49.     } 
50.  
51.     $n=$root_url.$name.".".$ext['extension']; 
52.  
53.     $result=move_uploaded_file($file['tmp_name'],$n); 
54.  
55.     if ($result){ 
56.  
57.       exit(json_encode(array("code"=>0,"msg"=>"ok","file"=>$n,"size"=>$file['size']),0)); 
58.  
59.     }else{ 
60.  
61.       exit(json_encode(array("code"=>1,"msg"=>"false","file"=>$n,"size"=>$file['size']),0)); 
62.  
63.     } 
64.  
65.   } 

上传效果：

Tags: layui多图上传 php多图上传

分享到：