form layui 同时提交多个对象_layui实现form表单同时提交数据和文件的代码

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表单同时提交数据和文件的代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。