十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍了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表单同时提交数据和文件”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!