tp5使用layui实现多个图片上传(带附件选择)的方法实例

m0_71661429

于 2022-06-03 17:05:56 发布

阅读量184

点赞数

分类专栏： tp5使用layui实现多个图片上传(带附件选择)的方法实例文章标签： layui javascript html

本文链接：https://blog.csdn.net/m0_71661429/article/details/125114077

版权

tp5使用layui实现多个图片上传(带附件选择)的方法实例专栏收录该内容

2 篇文章 3 订阅

订阅专栏

{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" οnclick="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">



<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" οnclick=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" οnclick=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" οnclick=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>