html页面通过ajax上传文件以及表单数据

js获取前端数据

function register() {
        var user_name = $("#username").val();
        var user_password = $("#password").val();
        var user_email = $("#email").val();
        var user_photo = $("#user_photo")[0].files[0];
        var user_birthday = $("#user_birthday").val();
        var user_phone = $("#phone").val();
        var user_nickname = $("#nickname").val();
        var province = $("select:first :selected").val();
        var city = $("select:eq(1) :selected").val();
        var area = $("select:last :selected").val();
        var formData = new FormData();
        formData.append("user_name",user_name);
        formData.append("user_password",user_password);
        formData.append("user_email",user_email);
        formData.append("user_photo",user_photo);
        formData.append("user_birthday",user_birthday);
        formData.append("user_phone",user_phone);
        formData.append("user_nickname",user_nickname);
        formData.append("province",province);
        formData.append("city",city);
        formData.append("area",area);
        $.ajax({
            url:"/users/register",
            type:"post",
            data:formData,
            processData: false,
            contentType: false,
            dataType:"json",
            // 成功响应的结果
            success: function (data) {
                if(data.code==200){
                    alert(data.message);
                }else{
                    alert(data.message);
                }
            },
            error: function () {
                alert("上传失败,服务器出现异常")
            }
        });
    }

后端Controller接收表单数据并处理文件

@RequestMapping(value = "/register")
    @ResponseBody
    public R register(String user_name, String user_password, String user_email,
                                 MultipartFile user_photo,
                                 @DateTimeFormat(pattern = "yyyy-MM-dd") Date user_birthday,
                                 String user_phone, String user_nickname,
                                 String province, String city, String area, HttpSession session) {
        String user_address = province + city + area;
        User user = new User(null, user_name, user_password, user_email, null, new Date(), user_birthday, user_phone, user_nickname, user_address, null);
        String real_path = null;
        String fileName = null;
        if (user_photo != null) {
            //获取文件原始名称
            fileName = user_photo.getOriginalFilename();
            //获取后缀
            String ext = FilenameUtils.getExtension(fileName);
            //重新命名
            fileName = UUID.randomUUID().toString() + "." + ext;
            user.setUser_photo(fileName);
            real_path = session.getServletContext().getRealPath("/upload");
            System.out.println(real_path);
            try {
                user_photo.transferTo(new File(real_path + File.separator + fileName));
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        int i = userService.register(user);
        if (i == 2) {
            return R.success();
        } else if (i == 3) {
            if (user_photo != null) {
                File file = new File(real_path + File.separator + fileName);
                file.delete();
            }
            return R.error(REnum.REGISTER_NAME);
        } else {
            if (user_photo != null) {
                File file = new File(real_path + File.separator + fileName);
                file.delete();
            }
            return R.error(REnum.REGISTER_ERROR);
        }
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值