- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章tp5使用layui实现多个图片上传(带附件选择)的方法实例由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
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 。
最后此篇关于tp5使用layui实现多个图片上传(带附件选择)的方法实例的文章就讲到这里了,如果你想了解更多关于tp5使用layui实现多个图片上传(带附件选择)的方法实例的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
是否有某种方法可以使用 JPA 或 Hibernate Crtiteria API 来表示这种 SQL?或者我应该将其作为 native 执行吗? SELECT A.X FROM (SELECT X,
在查询中, select id,name,feature,marks from (....) 我想删除其 id 在另一个 select 语句中存在的那些。 从 (...) 中选择 id 我是 sql
我想响应用户在 select 元素中选择一个项目。然而这个 jQuery: $('#platypusDropDown').select(function () { alert('You sel
这个问题在这里已经有了答案: SQL select only rows with max value on a column [duplicate] (27 个回答) 关闭8年前。 我正在学习 SQL
This question already has answers here: “Notice: Undefined variable”, “Notice: Undefined index”, and
我在 php 脚本中调用 SQL。有时“DE”中没有值,如果是这种情况我想从“EN”中获取值 应该是这样的,但不是这样的 IF (EXISTS (SELECT epf_application_deta
这可能是一个奇怪的问题,但不知道如何研究它。执行以下查询时: SELECT Foo.col1, Foo.col2, Foo.col3 FROM Foo INNER JOIN Bar ON
如何在使用 Camera.DestinationType.FILE_URI. 时在 phonegap camera API 中同时选择或拾取多个图像我能够一次只选择一张图像。我可以使用 this 在
这是一个纯粹的学术问题。这两个陈述实际上是否相同? IF EXISTS (SELECT TOP 1 1 FROM Table1) SELECT 1 ELSE SELECT 0 相对 IF EXIS
我使用 JSoup 来解析 HTML 响应。我有多个 Div 标签。我必须根据 ID 选择 Div 标签。 我的伪代码是这样的 Document divTag = Jsoup.connect(link
我正在处理一个具有多个选择框的表单。当用户从 selectbox1 中选择一个选项时,我需要 selectbox2 active 的另一个值。同样,当他选择 selectbox2 的另一个值时,我需要
Acme Inc. Christa Woods Charlotte Freeman Jeffrey Walton Ella Hubbard Se
我有一个login.html其中form定义如下: First Initial Plus Last Name : 我的do_authorize如下: "; pri
$.get( 'http://www.ufilme.ro/api/load/maron_online/470', function(data
我有一个下拉列表“磅”、“克”、“千克”和“盎司”。我想要这样一种情况,当我选择 gram 来执行一个函数时,当我在输入字段中输入一个值时,当我选择 pounds 时,我想要另一个函数来执行时我在输入
我有一个 GLSL 着色器,它从输入纹理的 channel 之一(例如 R)读取,然后写入输出纹理中的同一 channel 。该 channel 必须由用户选择。 我现在能想到的就是使用一个 int
我想根据下拉列表中的选定值生成输入文本框。 Options 2 3 4 5 就在这个选择框之后,一些输入字段应该按照选定的数字出现。 最佳答案 我建议您使用响应式(Reac
我是 SQL 新手,我想问一下如何根据首选项和分组选择条目。 +----------+----------+------+ | ENTRY_ID | ROUTE_ID | TYPE | +------
我有以下表结构: CREATE TABLE [dbo].[UTS_USERCLIENT_MAPPING_USER_LIST] ( [MAPPING_ID] [int] IDENTITY(1,1
我在移除不必要的床单时遇到了问题。我查看了不同的论坛并将不同的解决方案混合在一起。 此宏删除工作表(第一张工作表除外)。 Sub wrong() Dim sht As Object Applicati
我是一名优秀的程序员,十分优秀!