Servlet + Ajax 实现异步上传文件（图片）

Html：

<form id="avatarForm" enctype="multipart/form-data" method="post">
    <img id="avatar" onclick="chooseAvatar()" title="点击上传头像" class="avatar" src="image/avatar.jpg">
    <input id="loadAvatar" name="loadAvatar" type="file"
           accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
           onchange="changeAvatar()" style="display: none"/>
</form>

Js：

/**
 * 选择头像
 */
function chooseAvatar() {
    $("#loadAvatar").click();
}

/**
 * 更换头像
 */
function changeAvatar() {
    var formData = new FormData(document.getElementById("avatarForm"));
    $.ajax({
        url: baseUrl + "/avatar",
        type: "post",
        data: formData,
        processData: false,
        contentType: false,
        success: function (result) {
            if (result.status) {
                var avatar = document.getElementById("avatar");
                avatar.setAttribute("src", "image/avatar.jpg?i=" + Math.random());
            } else {
                alert(result.message);
            }
        }
    });
}

基础Servlet：

public abstract class BaseServlet extends HttpServlet {

    /**
     * 响应成功
     *
     * @param response 响应
     * @param data     响应结果数据
     */
    protected void doSuccessfulResponse(HttpServletResponse response, Object data) {
        try {
            ResponseVO responseVO = new ResponseVO(ResponseStatus.SUCCESS.getCode(), "", data);
            response.getWriter().write(JSON.toJSONString(responseVO));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * 响应失败
     *
     * @param response 响应
     * @param message  响应失败信息
     */
    protected void doFailedResponse(HttpServletResponse response, String message) {
        try {
            ResponseVO responseVO = new ResponseVO(ResponseStatus.FAIL.getCode(), message, null);
            response.getWriter().write(JSON.toJSONString(responseVO));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

响应VO类：

public class ResponseVO {

    // 响应状态
    private boolean status;

    // 响应码
    private int code;

    // 响应信息
    private String message;

    // 响应数据
    private Object data;

    public ResponseVO(int code, String message, Object data) {
        this.status = (code == ResponseStatus.SUCCESS.getCode());
        this.code = code;
        this.message = message;
        this.data = data;
    }

    public boolean getStatus() {
        return status;
    }

    public void setStatus(boolean status) {
        this.status = status;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}

响应状态码类：

public enum ResponseStatus {
    // 成功响应状态码
    SUCCESS(200),
    // 失败响应状态码
    FAIL(201);

    private int code;

    ResponseStatus(int code) {
        this.code = code;
    }

    public int getCode() {
        return code;
    }
}

处理上传文件Servlet：

@WebServlet("/avatar")
public class AvatarServlet extends BaseServlet {

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) {
        try {
            if (!ServletFileUpload.isMultipartContent(request)) { // 检测是否为多媒体上传
                doFailedResponse(response, "该文件不属于多媒体类型，无法上传");
                return;
            }
            // 配置上传参数
            DiskFileItemFactory factory = new DiskFileItemFactory();
            ServletFileUpload upload = new ServletFileUpload(factory);
            String uploadPath = Configs.get("avatar_url");
            File uploadDir = new File(uploadPath);
            if (!uploadDir.exists()) {
                doFailedResponse(response, "保存头像空间不存在，请联系管理员");
                return;
            }
            // 解析请求的内容提取文件数据
            List<FileItem> formItems = upload.parseRequest(request);
            if (formItems != null && formItems.size() > 0) {
                FileItem avatar = formItems.get(0);
                String filePath = uploadPath + File.separator + Configs.get("avatar_name");
                File storeFile = new File(filePath);
                if (storeFile.exists()) {
                    storeFile.delete();
                }
                avatar.write(storeFile); // 保存文件到硬盘
                doSuccessfulResponse(response, "头像上传成功");
            }
        } catch (Exception e) {
            e.printStackTrace();
            doFailedResponse(response, "头像上传失败，请联系管理员");
        }
    }
}