本文介绍了使用layui在前端实现多图片上传的功能，包括展示上传效果、入口代码介绍以及CSS样式的设置。主要涉及layui、javascript相关技术。
效果如下:
入口
<div class="layui-form-item">
<div class="layui-upload" style="width: 90%">
<button type="button" class="layui-btn" id="upload"><i class="layui-icon"></i>上传图片</button>
<span style="color: red"> (可上传多张照片)</span>
<input type="button" id="btnHide9" style="display: none" class="none">
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;height: 130px;width: 620px">
<ul id="demo9" class="layui-upload-list">
</ul>
</blockquote>
<input type="hidden" name="imgUrl" id="imgUrl">
</div>
</div>
其中 imgUrl 为上传字段（保存url的）
css 样式
#demo9 {
margin: 0 auto;
font-size: 0;
}
#demo9 li {
display: inline-block;
width: 150px;
padding-top: 1%;
}
#demo9 li img {
width: 100%;
}
.removeBtn {
position: absolute;
top: 2px;
right: 35px;
z-index: 11;
border: 0px;
border-radius: 50px;
background: red;
width: 22px;
height: 22px;
color: white;
font-size: 25px;
line-height: 25px;
}
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/showPhoto1/css/viewer.css">
<script src="${pageContext.request.contextPath}/js/showPhoto1/js/viewer.js"></script>
upload = layer.upload; //自己引入upload
var uploadInst9 = upload.render({
elem: '#upload'
,url: '${pageContext.request.contextPath}/file/v1/upload' //改成您自己的上传接口
,multiple: true
,auto: false
,method:'post'
,field: 'file'
,size: 5120
,accept: 'images' //只允许上传图片
,acceptMime: 'image/*' //只筛选图片
,bindAction: "#btnHide9"
,exts:'jpg|png|bmp|jpeg|.jpg|.png|.bmp|.jpeg'
,choose: function (obj) {
hover=layer.load(2);
$("#btnHide9").trigger("click");
}
,before: function(obj){
},allDone: function(obj){ //当文件全部被提交后，才触发
layer.close(hover);
}
, done: function (res,index) {
if(res.success == false){
return layer.msg('上传失败');
}
var path = res.data;
if (path==''){
return layer.msg('上传失败');
}
var contents = $("#imgUrl").val()
$('#demo9').append('<li style="position: relative"><img src="'+ path +'" data-original="${pageContext.request.contextPath}/'+ path +'" class="layui-upload-img"style="width: 100px;height: 80px;margin-right: 10px">' +
'<button class="removeBtn" onclick="removeImg(this,\''+path+'\',\''+9+'\',\''+'\')">×</button></li>')
$("#imgUrl").val(contents + path +",");
viewer9.update()
layer.close(hover);
}
, error: function () {
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
function insert() { //新增时清空
$("#demo9").html("");
}
// 初始化Viewer组件
var viewer9 = new Viewer(document.getElementById('demo9'), {
inline: false,
zIndex: 999999999999,
});
//分三步 获取数据,打开弹框,组装数据并且提交
function update() {
form.render(); //更新全部
var checkStatus = layui.table.checkStatus('datagrid');
var rows = checkStatus.data
if (rows.length == 0) {
layer.msg("至少选择一项", {anim: 6, time: 2000});
return;
} else if (rows.length > 1) {
layer.msg("至多选择一项", {anim: 6, time: 2000});
return;
}
var selectedlId = rows[0].stationId;
$.ajax({
url : controller + "/getById"
,method: 'get'
,data :{ id: selectedlId}
,success : function (data) {
list = JSON.parse(data);
let json = JSON.parse(data)
if (json.success) {
$("#demo9").html("");
let ckeObj = json.data.imgUrl
if (ckeObj != '' || ckeObj != null) {
ckeObj.split(",").forEach(path => {
if (path != '') {
$('#demo9').append('<li style="position: relative"><img src="' + path + '" data-original="' + path + '" class="layui-upload-img"style="width: 100px;height: 80px;margin-right: 10px">' +
'<button class="removeBtn" onclick="removeImg(this,\'' + path + '\',\'' + selectedlId + '\',\'' + '\')">×</button></li>')
}
})
}
viewer9.update()
form.val("formDemo", json.data);
form.render();
} else {
}
}
});
var upOpen = layer.open({
type:1
,content:$("#pop")
,title:"编辑信息配置"
, closeBtn: 0
, shade: 0.6
, area: ['860px', '780px']
,shadeClose:true
,success:function (layero,index) {
}
})
form.on('submit(submitBtn)',function (data) {
var fields="";
for(var name in data.field) {
if (name !='file'){
fields += name + ",";
}
}
data.field['fields'] = fields;
$.ajax({
url : controller + "/update"
,method: 'post'
,data : data.field
,success : function(data) {
var json = JSON.parse(data);
if (json.success) {
layui.table.reload('datagrid')
layer.msg('提交成功', {
icon: 1
,time: 3000
});
parent.layer.closeAll();
layer.close(upOpen)
location.reload();
} else {
layer.msg(json.msg, {
icon: 0
,time: 1000
});
layer.close(hover);
}
}
})
})
}
// 图片删除 删除oss并且更新数据
function removeImg(obj,result,rowId){
var hover=layer.load(2);
$.ajax({
url:controller+"/delOSSAndUpdateFile",
data:{fileUrl:result,id:rowId},
dataType:'text',
async:false,
success:function(data){
var json = JSON.parse(data);
if(json.success){
$(obj).parent().remove();
var contents = $("#imgUrl").val()
var contents1 = contents.split(',');
contents = "";
for (var j = 0; j < contents1.length; j++) {
if (contents1[j] != "" && contents1[j] != result) {
contents += contents1[j] + ","
}
}
$("#imgUrl").val(contents)
layer.close(hover);
}else{
layer.close(hover);
layer.alert(json.msg, {icon: 2, title: '错误'});
}
},
error: function () {
layer.close(hover);
layer.alert("删除出错!\r\n请查看日志!", {icon: 5, title: '异常'});
}
});
}
后端 删除代码
@RequestMapping("/delOSSAndUpdateFile")
@ResponseBody
public Result delOSSAndUpdateFile(@RequestParam String fileUrl, @RequestParam String id) {
User user = getUser();
try {
InfoDevice entity = infoDeviceService.getById(id);
if (entity != null) {
String imgUrls = entity.getImgUrl();
if (imgUrls!= null && !"".equals(imgUrls)) {
String[] split = imgUrls.split(",");
// List<String> fillList = Arrays.asList(split); Arrays中静态内部类ArrayList重写方法中没有remove
List<String> fillList = new ArrayList<>(Arrays.asList(split));
if (fillList.contains(fileUrl)) {
//去除 并且更新数据库
fillList.removeIf(e -> fileUrl.equals(e));
entity.setImgUrl(String.join(",",fillList)+",");
entity.setModifiedAt(new Date());
entity.setModifiedId(user.getId());
entity.setModifiedBy(user.getLoginName());
String fields = "自己的框架更新操作, 笔者这里是拼接更新字段";
infoDeviceService.update(entity, fields);
}
}
}
fileAppService.deleteFile(fileUrl);
return Result.ok();
} catch (Exception e) {
return Result.error("删除失败,错误信息:" + e.getMessage());
}
}
扫一扫
2422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
