簡述

　　　　本文的目的主要是用戶上傳文件至服務器時，異步上傳，不用刷新頁面。

 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一樣。

Ajax上傳文件