Ajax上传文件

Posted 2020-10-14 南橘

简述

　　　　本文的目的主要是用户上传文件至服务器时，异步上传，不用刷新页面。

---

 

 1 $("#saveArea").click(function () {
 2     // 获得上传文件DOM对象，根据已有表单创建formdata
 3     var formData = new FormData($("#uploadForm")[0]);
 4     $.ajax({
 5         url: ‘${pageContext.request.contextPath }/user/updateUserHeadPortrait‘,
 6         type: ‘POST‘,
 7         data: formData,
 8         contentType: false,
 9         processData: false,
10         success: function (data) {
11             var result = data.split(‘#‘)[0];
12             if (result == "修改成功！") {
13                 alert(‘success‘);
14             } else {
15                 alert(result);
16             }
17         }
18     });
19 })        

 解释：

　　　　1.用户点击保存按钮，根据页面form的id获得表单，再根据表单创建formdata。

　　　　2.将formdata传至后台即可。

后台代码

@RequestMapping("updateUserHeadPortrait")
@ResponseBody
public Object updateUserHeadPortrait(MultipartFile headPortrait, HttpSession session) throws IOException {
    Users users = (Users) session.getAttribute("user");
    String filename = users.getuUid()+"_"+headPortrait.getOriginalFilename();                                                       //文件名称
    String realPath = session.getServletContext().getRealPath("img/userHeadPortrait");                       //绝对路径
    String type = headPortrait.getContentType();                                                                //文件类型
    File file = new File(realPath, filename);
    if ("image/png".equals(type) || "image/jpg".equals(type) || "image/jpeg".equals(type)) {
        headPortrait.transferTo(file);                                                    //将图片保存到本地
        if (userServiceImap.updateUserHeadPortrait(users, filename)) {
            users.setuTitleImg(filename);
            session.setAttribute("user", users);
            return JSON.toJSONString("修改成功！#"+filename);
        } else {
            return JSON.toJSONString("修改失败，请联系技术支持#");
        }
    } else {
        return JSON.toJSONString("修改失败，请检查文件类型#");
    }
}

 

解释：

　　　　和普通的文件上传一样的。注意参数名称要和页面上面input的name一样。