快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

layui如何实现form表单同时提交数据和文件

这篇文章主要介绍了layui如何实现form表单同时提交数据和文件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联是一家专业提供河东企业网站建设,专注与做网站、成都做网站成都h5网站建设、小程序制作等业务。10年已为河东众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

1.jsp页面

·html代码

<%--用户注册的弹出框--%>

 
  
  
   
    用户名
    
     
    
   
        密码                
            确认密码                        <%--图片上传功能--%>    
    上传头像            

   
   
              立即注册      重置              

·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('上传失败 重试');
    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表单同时提交数据和文件”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


网站栏目:layui如何实现form表单同时提交数据和文件
文章出自:http://6mz.cn/article/ieiohe.html