tp5使用layui實現多個圖片上傳（帶附件選擇），如何加載layui在此不詳細說明，有需要可以百度
html代碼，主要處理都是在jq中，完成方法全部原創，也許不是最簡單的，但也能實現效果
|
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
|
{include file="public/header" /}<body><div class="x-nav"> <span class="layui-breadcrumb"> <a href="">首頁</a> <a href="">多選圖片列表</a> <a> <cite>添加多選圖片</cite></a> </span> <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" rel="external nofollow" title="刷新"> <i class="layui-icon" style="line-height:30px">?</i></a></div><div class="x-body"> <div class="top" style="font-size: 14px">添加多選圖片</div> <div style="width:100%;height: 5px;background-color: #077ee3;margin-top: 5px;margin-bottom: 20px"></div> <form action="" enctype="multipart/form-data" method="post" role="form" onSubmit="return check()"> <div class="layui-upload"> <button type="button" class="layui-btn" id="upload_img">多圖片上傳</button> <a class="layui-btn layui-btn-sm layui-btn-normal" onclick="selectImg('選擇圖片','{:url("selectImg")}','1000','600')" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <i class="layui-icon"></i>選擇圖片 </a> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> 預覽圖： <div class="layui-upload-list" id="demo2"></div> </blockquote> </div> <input name="url" class="imgInput" type="hidden"> <!--<button type="button" class="layui-btn" onclick="test()">--> <!--測試--> <!--</button>--> <div class="layui-form-item"> <label for="" class="layui-form-label"> </label> <button type="submit" class="layui-btn btnAdd" lay-filter="add" lay-submit=""> 增加 </button> </div> </form></div><style> .imgInput{ width: 600px; height: 35px; } .layui-form-label{ font-size: 14px; width: 100px; } select{ width: 500px; } #pre_img{ display: none; padding: 5px; border: 1px solid #999; } #demo2{ display: flex; display: -webkit-flex; /*justify-content: space-between;*/ flex-direction: row; flex-wrap: wrap; } .img{ width: 150px; height: 150px; } .btnAdd{ margin-top: 40px; } .img_item{ display: flex; flex-direction: column; text-align: center; margin-right: 20px; margin-bottom: 20px; } .delimg{ text-align: center; line-height: 20px; width: 160px; height: 20px; background-color: red; color: white; margin-top: 5px; }</style> <script> function check(){ $('input[name="url"]').val(urlList); var str = $('input[name="url"]').val(); if(str ==''|| str==null || str=='undefined'){ alert("請選擇圖片"); return false; } } function selectImgGo($url,$urlWeb){ var index = 0; if(urlList.length>0){ index = urlList.length; } var img = $([ '<div class="img_item">', '<div class="img" style="overflow:hidden;">', '<img src="'+ $urlWeb +'" alt="' + $url +'" class="layui-upload-img" style="max-width:150px;"></div>', '<div class="delimg" id="delimg" onclick=delImg("'+ index +'") href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="cursor:pointer ">刪除</div></div>' ].join('')); $('#demo2').append(img); urlList.push($url); imgList.push($urlWeb); } var imgList = []; var urlList = []; layui.use(['upload','jquery'],function () { $ = layui.jquery; var upload = layui.upload; //多圖片上傳 upload.render({ elem: '#upload_img' ,url:"{:url('share/upload_img')}" //上傳接口 ,multiple: true ,before: function(obj){ //預讀本地文件示例，不支持ie8 obj.preview(function(index, file, result){ }) } ,done: function(res){ var index0 = 0; if(urlList.length>0){ index0 = urlList.length; } var img0 = $([ '<div class="img_item">', '<div class="img" style="overflow:hidden;">', '<img src="'+ res.msg +'" class="layui-upload-img" style="max-width:150px;"></div>', '<div class="delimg" id="delimg" onclick=delImg("'+ index0 +'") href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="cursor:pointer ">刪除</div></div>' ].join('')); $('#demo2').append(img0); urlList.push(res.url); imgList.push(res.msg); } ,error: function(){// layer.close(layer.msg());//關閉上傳提示窗口 //請求異常回調 } }); }); function delImg(index){ urlList.splice(index,1); imgList.splice(index,1); $('#demo2').empty(); for (var i=0;i<imgList.length;i++){ var img0 = $([ '<div class="img_item">', '<div class="img" style="overflow:hidden;">', '<img src="'+ imgList[i] +'" class="layui-upload-img" style="max-width:150px;"></div>', '<div class="delimg" id="delimg" onclick=delImg("'+ i +'") href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="cursor:pointer ">刪除</div></div>' ].join('')); $('#demo2').append(img0); } } /*選擇圖片*/ function selectImg(title,url,w,h){ x_admin_show(title,url,w,h); } </script></body> </html> |
php代碼
|
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
|
//php layui圖片上傳 public function upload_img(){ $file = request()->file('file'); // 獲取上傳的文件 if($file==null){ exit(json_encode(array('code'=>1,'msg'=>'未上傳圖片'))); }else{ //5、對上傳文件做出條件限制（類型，大小等） $map = [ 'ext'=>'jpg,png,gif,jpeg',//后輟名 'size'=>320000000,//最大3M ]; //6、對上傳的文件進行較驗，如果合格就進行轉移到預定設定好的public/uploads目錄下 //返回保存的文件信息info，包括文件名和大小等數據 $info = $file->validate($map)->move(ROOT_PATH . 'public/uploads/img'); //獲取圖片寬高 list( $width , $height , $type , $attr ) = getimagesize ($info->getPathName()); if(is_null($info)){ $this->error($info->getError()); } $img = str_replace('\\','/',$info->getSaveName()); //保存附件 $annexData['filesize'] = $info->getInfo()['size']; $annexData['mimetype'] = $info->getInfo()['type']; $annexData['filename'] = $info->getInfo()['name']; $annexData['imagewidth'] = $width; $annexData['imageheight'] = $height; $annexData['type'] = 'img'; $annexData['url'] = $img; AAnnexModel::create($annexData); $img = constant("URL")."/uploads/img/".$img; exit(json_encode(array('code'=>0,'msg'=>$img,'url'=>$annexData['url']))); } }//多選圖片添加頁面 public function addImages(){ if($this->request->isPost()){ //2、獲取提交過來的數據，最后true參數，表示連上傳文件一起獲取 $data = $this->request->param(true); $res = AImagesModel::create($data); if(is_null($res)){ $this->error('文件添加失敗'); }else{ $this->success('文件添加成功...',url('imagesList')); } return; } return $this->fetch('images_add'); } |
到此這篇關于tp5使用layui實現多個圖片上傳(帶附件選擇)的方法實例的文章就介紹到這了,更多相關tp5 多圖片上傳內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/bilichen006/article/details/120961945
