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

1.jsp页面

·html代码

<%--用户注册的弹出框--%>
<div id="userDiv" style="display: none;">
    <form class="layui-form" id="userForm" lay-filter="deptForm" enctype="mutipart/form-data">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" >用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="6~18位，请使用数字或字母" lay-verify="checkName|username|required" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="password" name="password" lay-verify="required"  class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                    <input type="password" lay-verify="required|checkPwd"  class="layui-input">
                </div>
            </div>
            <%--图片上传功能--%>
            <div>
                <button type="button" name="url" class="layui-btn" id="test1">上传头像</button>
                    <img class="layui-upload-img" id="photo" width="100" height="100">
                    <p id="demoText"></p>
            </div>
            <hr/>
            <div class="layui-form-item" id="btn">
                <div class="layui-input-block">
                    <button id="get" lay-filter="reg" class="layui-btn btn-submit"  type="button" lay-submit="">立即注册</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </form>
</div>

·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('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                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";
                    } 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();
    }