1.到这一步,说明layui所需的环境你已经配好了(引入了相关依赖)
2.图片上传
a.html中引入div
预览图:
b.再引入js,这个和 Ajax请求差不多
data中可以携带参数,#test2 是图片按钮的id,url是后台地址,done函数中处理后台响应
//多图片上传
upload.render({
elem: '#test2'
,url: '/upload/img'
,multiple: true
,data : {"name":"zyb","age",22}
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#demo2').append('
')
});
}
,done: function(res){
//上传完毕
if (res.code>0){
return layer.msg('图片上传失败');
}else{
return layer.msg('图片上传成功');
}
}
});
c.java后台接收
@RequestMapping(value = "/upload/img", method = {RequestMethod.POST})
@ResponseBody
public Object upload(@RequestParam(value="file",required=false) MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws Exception {
Map map=new HashMap<>();
String name = request.getParameter("name");//获取data中数据
if (file!=null){
//获取文件名
String fileName = file.getOriginalFilename();
map.put("code",0);
}else {
map.put("code",1);
}
return map;
}
3.表单提交
a.为了看的简洁,我贴一个div,后面的大家自己去官方找一下,中文官网都能看得懂
账单明细填写
b.js代码,下面这段代码在官网上有(https://www.layui.com/demo/upload.html)
//form表单验证
layui.use(['form', 'layedit', 'laydate'], function(){
var form = layui.form
,layer = layui.layer
,layedit = layui.layedit
,laydate = layui.laydate;
//看这里~~~~
//监听提交,这里监听了按钮
form.on('submit(demo1)', function(data){
//data中就是你提交的数据,下面打印出来数据,是key value样子的。
//key 就是 div中 name的值( name="title"),也就是"title",可以自己试一下。
/*layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
*/
//这里请求后台
$.ajax({
url:"/mySubmit",
data:JSON.stringify( data.field),
dataType:'JSON',
contentType : "application/json",
type:'POST',
success :function (result) {
layer.msg(result.msg)
}
})
});
});
c.java后台接收
@PostMapping("/mySubmit")
@ResponseBody
public Map mySubmit(@RequestBody Map reqMap){
System.out.println( reqMap.get("title"));
Map map = new HashMap<>();
map.put("msg","成功");
return map;
}
总结:Layui还是很好用的,中文官方文档,看起来没难度,遇到bug多调试,多思考,就能解决。给Layui作者点赞!