layui实现form表单同时提交数据和⽂件js代码
//上传头像的⽅法
var uploadInst = der({
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){
//如果上传失败
de > 0){
return layer.msg('上传失败');
}
//上传成功
}
,
error: function(){
//演⽰失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span >上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
//提交表单的⽅法
<('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";
} else {
layer.alert(ret.msg, {
icon: 2,
title:"提⽰"
});
}
}
})
});
后台代码
@ResponseBody
@RequestMapping ("/reg")
public JsonResult save(MultipartFile file, User user, HttpServletRequest request){
try {
String path = Session().getServletContext().getRealPath("upload");
String pathPhoto = "/upload";
if(!file.isEmpty()){
String name = OriginalFilename();//获取接受到的图⽚名称
String newFileName = UUID.randomUUID().toString().substring(0,5)+"."+ Extension(name);            File fi = new File(path,newFileName);      //将path路径与图⽚名称联系在⼀起
if(!fi.getParentFile().exists()){    //判断是否存在path路径下的⽂件夹
}
user.setImgurl(pathPhoto+"/"+newFileName);  //为保存图⽚路径
}
if(!StringUtil.Name()) && !StringUtil.Password())){
userService.save(user);
jquery实现ajax
}
} catch (Exception e) {
e.printStackTrace();
return new JsonResult(Message());
}
return new JsonResult();
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。