layui实现form表单同时提交数据和文件的代码
1.jsp页面
·html代码
<%--用户注册的弹出框--%>用户名
1.jsp页面
·html代码
<%--用户注册的弹出框--%>用户名
·js代码
//上传头像的方法 varuploadInst=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){ returnlayer.msg('上传失败'); } //上传成功 } ,error:function(){ //演示失败状态,并实现重传 vardemoText=$('#demoText'); demoText.html('上传失败 重试'); demoText.find('.demo-reload').on('click',function(){ uploadInst.upload(); }); } }); //提交表单的方法 form.on('submit(reg)',function(data){ varfd=newFormData(); varformData=newFormData($("#userForm")[0]); $.ajax({ cache:true, type:"post", url:"/reg", async:false, data:formData,//你的formid contentType:false,//jax中contentType设置为false是为了避免JQuery对其操作,从而失去分界符,而使服务器不能正常解析文件 processData:false,//当设置为true的时候,jqueryajax提交的时候不会序列化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="externalnofollow"; }else{ layer.alert(ret.msg,{ icon:2, title:"提示" }); } } }) });
2.后台处理
@ResponseBody @RequestMapping("/reg") publicJsonResultsave(MultipartFilefile,Useruser,HttpServletRequestrequest){ try{ Stringpath=request.getSession().getServletContext().getRealPath("upload"); StringpathPhoto="/upload"; if(!file.isEmpty()){ Stringname=file.getOriginalFilename();//获取接受到的图片名称 StringnewFileName=UUID.randomUUID().toString().substring(0,5)+"."+FilenameUtils.getExtension(name); Filefi=newFile(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(Exceptione){ e.printStackTrace(); returnnewJsonResult(false,e.getMessage()); } returnnewJsonResult(); }
以上这篇layui实现form表单同时提交数据和文件的代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。