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


Posted in Javascript onOctober 25, 2019

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表单同时提交数据和文件的代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
一个js封装的不错的选项卡效果代码
Feb 15 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
vue实现弹幕功能
Oct 25 #Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 #Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 #Javascript
layui form表单提交后实现自动刷新
Oct 25 #Javascript
jquery实现购物车基本功能
Oct 25 #jQuery
vue中@change兼容问题详解
Oct 25 #Javascript
vue下的@change事件的实现
Oct 25 #Javascript
You might like
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
js 操作符实例代码
2009/10/24 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
js opener的使用详解
2014/01/11 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
AngularJS基础知识
2014/12/21 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
vue如何判断dom的class
2018/04/26 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
Python导出DBF文件到Excel的方法
2015/07/25 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
结构工程研究生求职信
2013/10/13 职场文书
模具专业自荐信
2014/05/29 职场文书
超市创意活动方案
2014/08/15 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
活动总结模板大全
2015/05/11 职场文书
社区干部培训心得体会
2016/01/06 职场文书
python中的装饰器该如何使用
2021/06/18 Python
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL