layui 上传图片后 将返回的数据放到表单中， 再保存form表单数据，带有图片放大查看
程序员文章站
2022-04-08 16:06:49
...
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path;
%>
<html>
<head>
<meta charset="UTF-8">
<title>房源编辑</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="<%=basePath %>/assets/layui/css/layui.css">
<link rel="stylesheet" href="<%=basePath %>/css/scroll-bar.css">
<link rel="stylesheet" href="<%=basePath %>/css/sub-page.css">
<link rel="stylesheet" href="<%=basePath %>/assets/nprogress/nprogress.css">
<link rel="stylesheet" href="<%=basePath %>/assets/jquery-fancybox/style/jquery.fancybox-1.3.1.css">
<style type="text/css">
.layui-upload-img {
width: 92px;
height: 92px;
margin: 0 10px 10px 0;
}
.imgDiv { float: left;position: relative;}
.imgDiv img {cursor: pointer;}
.imgDiv span{position:absolute;right:10px;}
</style>
</head>
<body>
<div class="ok-body">
<form class="layui-form layui-form-pane">
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label">验证必填项<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md12">
<div class="layui-form-item">
<label class="layui-form-label">地址<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input type="text" name="address" lay-verify="required" placeholder="请选择区域" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-row layui-upload">
<div class="layui-col-md12">
<div class="layui-upload-list in-ne" id="demo2"></div>
<input type="text" id="uploadHid" name="uploadHid" />
</div>
</div>
<div class="layui-row">
<button type="button" class="layui-btn" id="test2">图片上传</button>
<button class="layui-btn" lay-submit="" type="submit" id="test3" lay-filter="formDemo">
<i class="layui-icon"></i>保存
</button>
</div>
</form>
</div>
<!--js逻辑-->
<script src="<%=basePath %>/assets/js/jquery-1.8.3.min.js"></script>
<script src="<%=basePath %>/assets/layui/layui.js"></script>
<script src="<%=basePath %>/assets/nprogress/nprogress.js"></script>
<script src="<%=basePath %>/assets/jquery-fancybox/js/jquery.fancybox-1.3.1.js"></script>
<script>
var basePath = '<%=basePath %>';
NProgress.start();
window.onload = function () {
NProgress.done();
}
layui.use(['element', 'table', 'form', 'jquery','upload','layer'], function () {
var element = layui.element,table = layui.table,form = layui.form,
upload = layui.upload;
var $ = layui.jquery; save();
//多图片上传
upload.render({
elem: '#test2'
,url: basePath+'/imgUpload.do' //改成您自己的上传接口
,multiple: true, field: 'fileUploads'
,done: function(res,index, upload){
var uploadHid = $('#uploadHid').val(),backMe = res.backMessage;
if(uploadHid != '') uploadHid += ';';
$('#uploadHid').val(uploadHid + backMe);
},allDone: function(obj){
$('#demo2').html('');
var uploadHid = $('#uploadHid').val(),hidData = uploadHid.split(';');
for(var j=0;j<hidData.length;j++){
var data = hidData[j].split(','); //原文件名,保存文件名,地址
$('#demo2').append('<div class="imgDiv" id="div'+data[1]
+'"><span id="span'+data[1]+'" class="layui-btn-primary layui-icon layui-icon-close"></span><a rel="example_group" href="'+basePath + data[2]
+'" title="'+data[0]+'"><img alt="'+data[0]+'" src="'
+basePath + data[2]+'" class="layui-upload-img" /></a></div>');
$('#span' + data[1]).on('click', function () {
$('#div' + data[1]).remove();
$('#uploadHid').val(initSTR(uploadHid,data[1]));
});
}
$("a[rel=example_group]").fancybox({ //点击放大查看效果
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
}
});
});
function save(){
layui.use(['form'], function () {
var form = layui.form;
form.on('submit(formDemo)', function (data) {
$.post(basePath + '/saveHouse.do', {
params: JSON.stringify(data.field),filePath:$('#uploadHid').val()
},function (result) {
layer.alert('保存成功！');
return false;
}, 'json');
return false;
});
});
}
function initSTR(a,b){
var data = a.split(';'),str = '';
for(var j=0;j<data.length;j++){
if(data[j].indexOf(b) > -1){}else{
if(str != '') str += ';';
str += data[j];
}
}
return str;
}
</script>
</body>
</html>放大查看图片代码在我的博客中，希望能够帮助到大家，更多是给自己留个笔记(#^.^#)
上一篇： 页面多个图片上传，可删除代码
下一篇： python 动态传参