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 相关文章推荐
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 Javascript
小程序表单认证布局及验证详解
Jun 19 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 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
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
Django的session中对于用户验证的支持
2015/07/23 Python
python中的字典操作及字典函数
2018/01/03 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
应届生保险求职信
2013/11/11 职场文书
女大学生个人求职信
2013/12/09 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
考试作弊被抓检讨书
2014/01/10 职场文书
推广普通话演讲稿
2014/05/23 职场文书
2015年检验科工作总结
2015/04/27 职场文书
暑期家教宣传单
2015/07/14 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
python之基数排序的实现
2021/07/26 Python
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS