layui图片上传、预览、删除、
<div class="layui-upload">
<button type="button" id="test2" class="layui-btn tj">多图片上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">
预览图:
<div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">
#for(tt:ccbeandb)
<div id="" class="file-iteme">
<div class="handle" onclick="delFile(this)"> <i class="layui-icon"
style="color: white ;margin-right: 40%"></i></div>
<img style="width: 100px;height: 100px;" class="preview" id="imgid" src='#(tt.imgUrl)'>
<div class="info" id="filename">#(tt.imgName)</div>
<input type="hidden" name="imgs" value="#(tt.imgUrl)" />
</div>
#end
</div>
</blockquote>
</div>
<script>
layui.use('upload', function () {
var images = [];
var $ = layui.jquery,
upload = layui.upload;
upload.render({
elem: '#test2',
url: '',
data: {
//要往后台传的值
}
,
multiple: true,
acceptMime: 'image/*',
ext: 'jpg|png|gif|bmp|jpeg',
before: function (obj) {
this.data = {
//要往后台传的值
}
layer.msg('图片上传中...', {
icon: 16,
shade: 0.01,
time: 0
})
},
done: function (res) {
var images = [];
layer.close(layer.msg()); //关闭上传提示窗口
//上传完毕
$('#uploader-list').append(
'<div id="" class="file-iteme">' +
'<div class="handle" οnclick="delFile(this)"> <i class="layui-icon" style="color: white ;margin-right: 40%"></i></div>' +
'<img style="width: 100px;height: 100px;" class="preview" id="imgid" src=' + res.url +
'>' +
'<div class="info" id="filename">' + res.filename + '</div>' +
'<input type="hidden" name="imgs" value="' + res.url + '" />' +
'</div>'
);
}
});
$(document).on("mouseenter mouseleave", ".file-iteme", function (event) {
if (event.type === "mouseenter") {
//鼠标悬浮
$(this).children(".info").fadeIn("fast");
$(this).children(".handle").fadeIn("fast");
} else if (event.type === "mouseleave") {
//鼠标离开
$(this).children(".info").hide();
$(this).children(".handle").hide();
}
});
delFile = function (pay) {
var path = $(pay).next().attr('src');
var filename = $(pay).next().next().html();
var t = $(pay).parent()
console.log(t)
if (filename == "") {
alert("还未上传图片!")
} else {
if (confirm("确实要删除吗?")) {
$.ajax({
type: "POST",
url: "",
data: {
//要往后台传的值
},
dataType: "json",
success: function (res) {
if (res == 1) {
t.remove();
layer.msg('删除成功');
} else {
layer.msg('删除失败');
}
}
});
}
}
}
$(document).on("click", ".file-iteme .preview", function (event) {
var url = $(this).attr('src');
var index = layer.open({
type: 2,
content: url,
area: ['100%', '100%'],
title: "预览",
maxmin: true,
closeBtn: 1
});
layer.full(index);
})
})
</script>
<style>
.uploader-list {
margin-left: -15px;
}
.uploader-list .info {
position: relative;
margin-top: -25px;
background-color: black;
color: white;
filter: alpha(Opacity=80);
-moz-opacity: 0.5;
opacity: 0.5;
width: 100px;
height: 25px;
text-align: center;
display: none;
}
.uploader-list .handle {
position: relative;
background-color: black;
color: white;
filter: alpha(Opacity=80);
-moz-opacity: 0.5;
opacity: 0.5;
width: 100px;
text-align: right;
height: 18px;
margin-bottom: -18px;
display: none;
}
.uploader-list .handle i {
margin-right: 5px;
}
.uploader-list .handle i:hover {
cursor: pointer;
}
.uploader-list .file-iteme {
margin: 12px 0 0 15px;
padding: 1px;
float: left;
}
</style>
以上就是layui上传多图片的功能,悬浮可以删除,点击可以预览