一般上传文件后会返回文件的路径，然后存储到数据库，那么首先实现上传后的放大和删除功能
?function uploadSmallPic() { ???????var upload = layui.upload; ???????upload.render({ ???????????elem: ‘#smallPic‘ ???????????, url: ‘/upload/uploadPic‘ ???????????, auto: false ???????????, number: 1 ???????????, bindAction: ‘#uploadSmallPic‘ ???????????, choose: function (obj) { ???????????????var files = obj.pushFile(); ???????????????obj.preview(function (index, file, result) { ???????????????????$(‘#smallPicContent‘).append(‘<div ?style="width:80px;height: 90px;float: left;margin-right: 5px" class="image-container" id="smallPicContainer‘ + index + ‘">‘ + ???????????????????????‘<div class="delete-css"><button id="upload_smallPic_‘ + index + ‘" style="width: 20px;height: 20px;"><i class="layui-icon ayui-icon-close">‘ + ???????????????????????‘</i></button>‘ + ???????????????????????‘</div>‘ + ???????????????????????‘<img id="showSmallPic‘ + index + ‘" ?style="width:80px;height: 80px" src="‘ + result + ‘" alt="‘ + file.name + ‘"></div>‘ ???????????????????); ???????????????????//删除某图片 ???????????????????$("#upload_smallPic_" + index).bind(‘click‘, function () { ???????????????????????$("#smallPicContainer" + index).remove(); ???????????????????????smallPic=""; ???????????????????}); ???????????????????//某图片放大预览 ???????????????????showMedia("showSmallPic" + index, "image", result); ???????????????}) ???????????}, ???????????done: function (res, index) { ???????????????smallPic = res.data; ???????????????layer.msg(res.msg); ???????????????$(‘#smallPicContent‘).html(‘‘); ???????????????return delete this.files[index]; ???????????} ???????}); ???}
function showMedia(id, type, src) {
???var idBar = "#" + id;
???$(idBar).bind(‘click‘, function () {
???????var width = $(idBar).width();
???????var height = $(idBar).height();
???????var scaleWH = width / height;
???????var bigH = 500;
???????var bigW = scaleWH * bigH;
???????if (bigW > 900) {
???????????bigW = 900;
???????????bigH = bigW / scaleWH;
???????} // 放大预览图片
???????if (type == "video") {
???????????layer.open({
???????????????type: 1,
???????????????title: false,
???????????????closeBtn: 1,
???????????????shadeClose: true,
???????????????area: [bigW + ‘px‘, bigH + ‘px‘], //宽高
???????????????content: "<video width=‘" + bigW + "‘ height=‘" + bigH + "‘controls=\"controls\" src=" + src + " />"
???????????});
???????} else {
???????????layer.open({
???????????????type: 1,
???????????????title: false,
???????????????closeBtn: 1,
???????????????shadeClose: true,
???????????????area: [bigW + ‘px‘, bigH + ‘px‘], //宽高
???????????????content: "<img width=‘" + bigW + "‘ height=‘" + bigH + "‘controls=\"controls\" src=" + src + " />"
???????????});
???????}
???});
}
//删除图片
function deleteMedia(id, index) {
???var idBar = "#" + id;
???$(idBar).bind(‘click‘, function () {
???????//从map中删除
???????imgUrlList.splice(index, 1)
???????//删除div
???????$("#container" + index).remove();
???});
}但在编辑数据时需要实现数据图片回显
?//设置小图 ???????????????????if (resp.data.goods.smallPic != null) { ???????????????????????smallPic = resp.data.goods.smallPic; ???????????????????????$(‘#smallPicContent‘).append(‘<div ?style="width:80px;height: 90px;float: left;margin-right: 5px" class="image-container" id="smallPicContainer">‘ + ???????????????????????????‘<div class="delete-css"><button id="upload_smallPic_‘ + ‘" style="width: 20px;height: 20px;"><i class="layui-icon ayui-icon-close">‘ + ???????????????????????????‘</i></button>‘ + ???????????????????????????‘</div>‘ + ???????????????????????????‘<img id="showSmallPic‘ + ‘" ?style="width:80px;height: 80px" src="‘ + smallPic + ‘"></div>‘ ???????????????????????); ???????????????????????//删除某图片 ???????????????????????$("#upload_smallPic_").bind(‘click‘, function () { ???????????????????????????$("#smallPicContainer").remove(); ???????????????????????????smallPic=""; ???????????????????????}); ???????????????????????//某图片放大预览 ???????????????????????showMedia("showSmallPic", "image", smallPic); ???????????????????}layui——上传图片，并实现放大预览
原文地址：https://www.cnblogs.com/fmlyzp/p/10663810.html