java实现上传文件进度

原创

mob64ca12efd81c 2024-11-23 04:02:45 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12efd81c的原创作品，请联系作者获取转载授权，否则将追究法律责任

Java 实现上传文件进度的详细教程

上传文件是Web开发中常见的需求，而在上传文件时，反馈用户上传进度将大大提升用户体验。本文将为你详细介绍如何在Java中实现上传文件的进度显示，涵盖整个流程、代码示例及注释说明等。

整件事情的流程

在实现上传文件进度的过程中，整体的流程可以分为以下几个步骤：

步骤	描述
1	创建HTML页面，提供文件上传功能
2	在前端使用JavaScript监控文件上传进度
3	使用Servlet接收上传的文件
4	在后端实现文件保存逻辑
5	返回进度更新给前端显示

步骤详细说明

第一步：创建HTML页面

我们需要一个简单的HTML页面来允许用户选择文件并上传。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
    <script>
        function uploadFile() {
            const fileInput = document.getElementById('file');
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload', true);
            
            // 监听进度事件
            xhr.upload.onprogress = function(event) {
                if (event.lengthComputable) {
                    const percentComplete = (event.loaded / event.total) * 100;
                    document.getElementById('progress-bar').style.width = percentComplete + '%';
                    document.getElementById('progress-text').innerText = Math.round(percentComplete) + '%';
                }
            };
            
            xhr.send(formData);
        }
    </script>
    <style>
        #progress-bar {
            width: 0;
            height: 20px;
            background-color: green;
        }
    </style>
</head>
<body>
    上传文件
    <input type="file" id="file" />
    <button onclick="uploadFile()">上传</button>
    <div style="border: 1px solid #000; width: 100%; margin-top: 10px;">
        <div id="progress-bar"></div>
    </div>
    <div id="progress-text">0%</div>
</body>
</html>

代码说明：

HTML结构：提供文件输入框和上传按钮。
JavaScript部分：创建一个XMLHttpRequest对象以发送异步请求，并通过onprogress事件处理函数计算并更新上传进度。
CSS样式：定义进度条的外观。

第二步：使用Servlet接收上传的文件

需要创建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.nio.file.Paths;

@WebServlet("/upload")
@MultipartConfig
public class FileUploadServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 获取文件部分
        Part filePart = request.getPart("file"); 
        String fileName = Paths.get(filePart.getSubmittedFileName()).getFileName().toString(); // 获取提交的文件名
        File uploads = new File("uploads"); // 指定上传路径
        if (!uploads.exists()) uploads.mkdir(); // 如果目录不存在则创建
      
        filePart.write(Paths.get(uploads.getAbsolutePath(), fileName).toString()); // 保存文件到指定目录
        
        response.getWriter().print("文件上传成功"); // 通知客户端
    }
}

代码说明：

@MultipartConfig：标记Servlet可以处理文件上传。
请求处理逻辑：从请求中获取文件部分，然后保存到服务器指定的目录中。

第三步：依赖配置

为了使上传功能正常工作，确保在web.xml中配置Servlet。

<servlet>
    <servlet-name>FileUploadServlet</servlet-name>
    <servlet-class>com.example.FileUploadServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>FileUploadServlet</servlet-name>
    <url-pattern>/upload</url-pattern>
</servlet-mapping>

第四步：技术图示

下面是代码结构的关系图，展示各个组件之间的关系：

erDiagram
    HTML ||--o{ JavaScript : controls
    JavaScript ||--o{ XMLHttpRequest : sends
    JavaScript ||--o{ ProgressBar : displays
    Servlet ||--o{ File : saves
    File ||--o{ Directory : in