layui实现form表单同时提交数据和文件的代码

1.jsp页面

·html代码

<%--用户注册的弹出框--%>
<div id=\"userDiv\" style=\"display: none;\">
 <form class=\"layui-form\" id=\"userForm\" lay-filter=\"deptForm\" enctype=\"mutipart/form-data\">
  <input type=\"hidden\" name=\"id\">
  <div class=\"layui-form-item\">
   <div class=\"layui-inline\">
    <label class=\"layui-form-label\" >用户名</label>
    <div class=\"layui-input-inline\">
     <input type=\"text\" name=\"name\" placeholder=\"6~18位，请使用数字或字母\" lay-verify=\"checkName|username|required\" class=\"layui-input\">
    </div>
   </div>
   <div class=\"layui-inline\">
    <label class=\"layui-form-label\">密码</label>
    <div class=\"layui-input-inline\">
     <input type=\"password\" id=\"password\" name=\"password\" lay-verify=\"required\" class=\"layui-input\">
    </div>
   </div>
   <div class=\"layui-inline\">
    <label class=\"layui-form-label\">确认密码</label>
    <div class=\"layui-input-inline\">
     <input type=\"password\" lay-verify=\"required|checkPwd\" class=\"layui-input\">
    </div>
   </div>
   <%--图片上传功能--%>
   <div>
    <button type=\"button\" name=\"url\" class=\"layui-btn\" id=\"test1\">上传头像</button>
     <img class=\"layui-upload-img\" id=\"photo\" width=\"100\" height=\"100\">
     <p id=\"demoText\"></p>
   </div>
   <hr/>
   <div class=\"layui-form-item\" id=\"btn\">
    <div class=\"layui-input-block\">
     <button id=\"get\" lay-filter=\"reg\" class=\"layui-btn btn-submit\" type=\"button\" lay-submit=\"\">立即注册</button>
     <button type=\"reset\" class=\"layui-btn layui-btn-primary\">重置</button>
    </div>
   </div>
  </div>
 </form>
</div>

·js代码

//上传头像的方法
  var uploadInst = upload.render({
   elem: \'#test1\'  /*根据绑定id，打开本地图片*/
   ,url: \'/reg\' /*上传后台接受接口*/
   ,auto: false  /*true为选中图片直接提交，false为不提交根据bindAction属性上的id提交*/
   ,bindAction: \'#get\'
   ,drag:true
   ,auto: false
   ,choose:function(obj){
    //预读本地文件示例，不支持ie8
    obj.preview(function(index, file, result){
     $(\'#photo\').attr(\'src\', result); //图片链接（base64）
    });
   }
   ,done: function(res){
    //如果上传失败
    if(res.code > 0){
     return layer.msg(\'上传失败\');
    }
    //上传成功
   }
   ,error: function(){
    //演示失败状态，并实现重传
    var demoText = $(\'#demoText\');
    demoText.html(\'<span style=\"color: #FF5722;\">上传失败</span> <a class=\"layui-btn layui-btn-mini demo-reload\">重试</a>\');
    demoText.find(\'.demo-reload\').on(\'click\', function(){
     uploadInst.upload();
    });
   }
  });
 //提交表单的方法
 form.on(\'submit(reg)\', function (data) {
   var fd = new FormData();
   var formData = new FormData($( \"#userForm\" )[0]);
   $.ajax({
    cache : true,
    type : \"post\",
    url : \"/reg\",
    async : false,
    data : formData, // 你的formid
    contentType: false, //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
    processData: false, //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
    error : function(request) {
     layer.alert(\'操作失败\', {
      icon: 2,
      title:\"提示\"
     });
    },
    success : function(ret) {
     if (ret.success) {
      layer.alert(\'注册成功\', {
       icon: 2,
       title:\"提示\"
      });
      layer.closeAll();
      window.location.href=\"/login\" rel=\"external nofollow\" ;
     } else {
      layer.alert(ret.msg, {
       icon: 2,
       title:\"提示\"
      });
     }
    }
    })
  });

2.后台处理

@ResponseBody
 @RequestMapping (\"/reg\")
 public JsonResult save(MultipartFile file, User user, HttpServletRequest request){
  try {
   String path = request.getSession().getServletContext().getRealPath(\"upload\");
   String pathPhoto = \"/upload\";
   if(!file.isEmpty()){
    String name = file.getOriginalFilename();//获取接受到的图片名称
    String newFileName = UUID.randomUUID().toString().substring(0,5)+\".\"+ FilenameUtils.getExtension(name);
    File fi = new File(path,newFileName);  //将path路径与图片名称联系在一起
    if(!fi.getParentFile().exists()){ //判断是否存在path路径下的文件夹
     fi.getParentFile().mkdirs();  //不存在创建path路径下的文件夹
    }
    file.transferTo(fi);      //上传图片
    user.setImgurl(pathPhoto+\"/\"+newFileName); //为保存图片路径
   }
   if(!StringUtil.isEmpty(user.getName()) && !StringUtil.isEmpty(user.getPassword())){
    userService.save(user);
   }
  } catch (Exception e) {
   e.printStackTrace();
   return new JsonResult(false,e.getMessage());
  }
  return new JsonResult();
 }

以上这篇layui实现form表单同时提交数据和文件的代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。