layui如何實現(xiàn)form表單同時提交數(shù)據(jù)和文件

這篇文章主要介紹了layui如何實現(xiàn)form表單同時提交數(shù)據(jù)和文件，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

1.jsp頁面

·html代碼

<%--用戶注冊的彈出框--%>
<div id="userDiv" >
 <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位，請使用數(shù)字或字母" 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'  /*根據(jù)綁定id，打開本地圖片*/
   ,url: '/reg' /*上傳后臺接受接口*/
   ,auto: false  /*true為選中圖片直接提交，false為不提交根據(jù)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(){
    //演示失敗狀態(tài)，并實現(xiàn)重傳
    var demoText = $('#demoText');
    demoText.html('<span >上傳失敗</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路徑與圖片名稱聯(lián)系在一起
    if(!fi.getParentFile().exists()){ //判斷是否存在path路徑下的文件夾
     fi.getParentFile().mkdirs();  //不存在創(chuàng)建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();
 }

感謝你能夠認真閱讀完這篇文章，希望小編分享的“l(fā)ayui如何實現(xiàn)form表單同時提交數(shù)據(jù)和文件”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!