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 相关文章推荐
validator验证控件使用代码
Nov 23 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
理解javascript中DOM事件
Dec 25 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
JS数组去重的6种方法完整实例
Dec 08 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
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
PHP的password_hash()使用实例
2014/03/17 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
详解PHP中的PDO类
2015/07/06 PHP
php去掉文件前几行的方法
2015/07/29 PHP
PHP处理会话函数大总结
2015/08/05 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
javascript基础知识讲解
2017/01/11 Javascript
DOM事件探秘篇
2017/02/15 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
python实现简单名片管理系统
2018/11/30 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
基于Python实现简单学生管理系统
2020/07/24 Python
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
节能环保口号
2014/06/12 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
保护地球的宣传语
2015/07/13 职场文书
Python中的tkinter库简单案例详解
2022/01/22 Python