Ajax上传文件

简述

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

---

 

 1 $("#saveArea").click(function () {
    // 获得上传文件DOM对象，根据已有表单创建formdata
    var formData = new FormData($("#uploadForm")[0]);
    $.ajax({
        url: '${pageContext.request.contextPath }/user/updateUserHeadPortrait',
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        success: function (data) {
            var result = data.split('#')[0];
            if (result == "修改成功！") {
                alert('success');
            } else {
                alert(result);
            }
        }
    });
})        

 解释：

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