jsp上传头像成功后自动显示

基础概念

JSP（JavaServer Pages）是一种用于创建动态Web内容的技术。上传头像并自动显示的功能通常涉及文件上传和页面刷新两个部分。

类型与应用场景

类型：这种功能通常应用于社交网络、论坛、博客等需要用户个性化设置的网站。
应用场景：用户注册或编辑个人信息时，上传头像后立即在页面上显示新头像。

实现方法

以下是一个简单的JSP示例，展示如何实现上传头像后自动显示的功能：

HTML部分

<!DOCTYPE html>
<html>
<head>
    <title>Upload Avatar</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <form id="uploadForm" action="upload.jsp" method="post" enctype="multipart/form-data">
        <input type="file" name="avatar" id="avatar">
        <input type="submit" value="Upload">
    </form>
    <img id="avatarPreview" src="default-avatar.jpg" alt="Avatar Preview">
</body>
</html>

JavaScript部分（使用jQuery）

$(document).ready(function() {
    $('#uploadForm').on('submit', function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            url: 'upload.jsp',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
                $('#avatarPreview').attr('src', data.newAvatarUrl);
            },
            error: function(xhr, status, error) {
                alert('Upload failed: ' + error);
            }
        });
    });
});

JSP部分（upload.jsp）

<%@ page import="java.io.*, java.util.*, javax.servlet.http.*, javax.servlet.*" %>
<%
    Part filePart = request.getPart("avatar");
    String fileName = Paths.get(filePart.getSubmittedFileName()).getFileName().toString();
    String uploadPath = getServletContext().getRealPath("") + File.separator + "uploads";
    File uploadDir = new File(uploadPath);
    if (!uploadDir.exists()) uploadDir.mkdir();
    String filePath = uploadPath + File.separator + fileName;
    filePart.write(filePath);
    String newAvatarUrl = request.getContextPath() + "/uploads/" + fileName;
%>
<%= newAvatarUrl %>