常用案例之上传头像

index.jsp

<%--
  Created by IntelliJ IDEA.
  User: ttc
  Date: 2018/7/13
  Time: 9:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script>
        window.onload = function () {
            document.querySelector("#file").onchange = function () {
                var req = new XMLHttpRequest();
                var form = new FormData(document.getElementById("form1"));
//              form.append("file",document.querySelector("#file").files[0]);
                req.open("post", "${pageContext.request.contextPath}/upload.do", true);
                req.send(form);
                req.onload = function () {
                    document.getElementById("img").src = "${pageContext.request.contextPath}/pic/" + req.responseText;
                }
            }
        }
    </script>
    <style>
        img {
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<form id="form1" action="${pageContext.request.contextPath}/upload.do" method="post" enctype="multipart/form-data">
    <img id="img" src="${pageContext.request.contextPath}/pic/${pic}"
         onerror="this.src='${pageContext.request.contextPath}/default.jpg'">
    <input type="file" name="file" id="file">
</form>
</body>
</html>

servlet

package com.neu.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import java.io.File;
import java.io.IOException;
import java.util.UUID;

/**
 * Created by ttc on 2018/7/13.
 */
@WebServlet(name = "UploadServlet",urlPatterns = "/upload.do")
@MultipartConfig
public class UploadServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Part part = request.getPart("file");
        String name = part.getSubmittedFileName();
        UUID uuid = UUID.randomUUID();

        String path = request.getServletContext().getRealPath("")+"/pic/";
        File file = new File(path);
        if (!file.exists()){
            file.mkdirs();
        }
        part.write(path+uuid+name);
        response.getWriter().print(uuid+name);
        request.getSession().setAttribute("pic",uuid+name);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

目录结构

image.png

注意：在web自动部署时，空文件夹不会被自动创建到部署目录中，所以需要在后台判断文件夹是否存在，如果不存在，就需要创建文件夹。

常用案例之上传头像

推荐阅读更多精彩内容