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