Layui上传图片和表单提交(SpringBoot项目后台接收请求信息)

1.到这一步,说明layui所需的环境你已经配好了(引入了相关依赖)

Layui上传图片和表单提交(SpringBoot项目后台接收请求信息)_第1张图片

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(''+ file.name +'')
      });
    }
    ,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作者点赞!

你可能感兴趣的:(Springboot,Layui)