微客导航 » 文章资讯 » layui实现form表单同时提交数据和文件的代码

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

2023-08-10 09:22:04 335

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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐