Struts2实现文件上传时显示进度条功能

请看下面的详细讲解：

1. 背景和思路

在Java Web开发中，文件上传功能是一个非常常见而且常用的功能，而文件上传时的进度条功能可以让用户更加直观地看到上传的进程和速度，大大提升了用户体验。

在Struts2框架中，想要实现文件上传并显示进度条功能，通常需要借助第三方插件或者库。该攻略介绍一种基于apache.commons包中的FileUpload组件实现Struts2文件上传进度条功能的方法。

具体思路如下：

通过FileUpload组件实现文件上传
监听文件上传过程中产生的进度事件
将上传进度信息通过异步请求的方式返回给前端，前端通过Ajax响应显示出进度条

2. 解决方案

2.1 导入依赖包

首先需要导入以下依赖包：

<!-- Struts2核心包 -->
<dependency>
    <groupId>org.apache.struts</groupId>
    <artifactId>struts2-core</artifactId>
    <version>2.5.22</version>
</dependency>
<!-- Apache.commons文件上传组件 -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.4</version>
</dependency>

2.2 编写Action类

在Action类中，需要定义一个可以返回当前文件上传进度信息的方法，可以通过使用com.opensymphony.xwork2.ActionSupport类的inputStream属性，将上传进度使用输出流（OutputStream）的方式输出。

下面是一个简单的示例：

public class UploadAction extends ActionSupport {

    private File file;
    private String fileContentType;
    private String fileFileName;
    // 定义一个输入流来接收上传进度信息
    private InputStream inputStream;

    // 省略getter和setter

    // 定义一个方法，返回当前文件上传进度信息
    public InputStream getInputStream() {
        return inputStream;
    }

    public String execute() throws Exception{
        HttpServletRequest request = ServletActionContext.getRequest();
        HttpServletResponse response = ServletActionContext.getResponse();
        // 设定相应的编码格式，避免中文乱码问题
        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");

        // 通过FileUpload组件实现文件上传
        DiskFileItemFactory factory = new DiskFileItemFactory();
        File tempFile = new File("I:\\temp");
        factory.setRepository(tempFile);
        ServletFileUpload upload = new ServletFileUpload(factory);
        // 监听文件上传过程中产生的进度事件
        ProgressListener progressListener = new ProgressListenerImpl(response);
        upload.setProgressListener(progressListener);
        List<FileItem> items = upload.parseRequest(request);
        for(FileItem item : items) {
            if(item.isFormField()){

            } else {
                // 解决文件上传中文乱码问题
                String fileName = item.getName();
                fileName = new String(fileName.getBytes("GBK"),"UTF-8");
                // 输出文件上传进度信息
                String result = "{\"code\":0,\"msg\":\"\"upload success！\"}";
                inputStream = new ByteArrayInputStream(result.getBytes(StandardCharsets.UTF_8));
                item.write(new File(uploadPath + fileName));
            }
        }
        return SUCCESS;
    }
}

需要注意的是，这里我们需要通过ProgressListener监听器实时获取文件上传的进度信息，并将该信息通过输出流（OutputStream）的方式返回给前端。

ProgressListenerImpl类的示例如下：

public class ProgressListenerImpl implements ProgressListener {

    private HttpServletResponse response;

    public ProgressListenerImpl(HttpServletResponse response) {
        super();
        this.response = response;
    }

    // 文件上传进度监控
    @Override
    public void update(long pBytesRead, long pContentLength, int pItems) {
        if(pBytesRead == pContentLength){
            return;
        }
        HttpSession httpSession = ServletActionContext.getRequest().getSession();
        long percent = pBytesRead * 100 / pContentLength;

        if(httpSession.getAttribute("pBytesRead") == null || (long)httpSession.getAttribute("pBytesRead") != pBytesRead){
            httpSession.setAttribute("pBytesRead", pBytesRead);
            try {
                response.getWriter().println(percent);
                response.getWriter().flush();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        if(percent == 100){
            httpSession.removeAttribute("pBytesRead");
        }
    }
}

2.3 编写前端页面

前端页面需要通过Ajax的方式，调用后台Action类定义的传输进度的方法，并利用jQuery实现异步请求，实时更新进度条显示状态。

下面是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Struts2文件上传进度条功能</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function() {
            var timer;
            $("#upload-button").click(function(){
                // 利用Ajax调用后台Action类定义的传输进度的方法
                $.ajax({
                    type : "get",
                    url : "upload!progress.action",
                    dataType : "text",
                    cache : false,
                    complete: function(result){
                        $(".progress-bar").text(result.responseText + "%");
                        $(".progress-bar").width(result.responseText + "%");
                        if(result.responseText == 100){
                            clearInterval(timer);
                            alert("文件上传成功！");
                        }
                    }
                });
            });
        });
    </script>
    <style>
        body {
            margin: 20px auto;
        }
        .progress {
            width: 60%;
            margin: 50px auto;
        }
        .progress-bar {
            float: left;
            width: 0%;
            height: 2rem;
            font-size: 1.5rem;
            line-height: 2rem;
            color: #fff;
            text-align: center;
            background-color: #007bff;
            transition: width .6s ease;
        }
    </style>
</head>
<body>
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100">
        0%
    </div>
</div>
<button id="upload-button">上传文件</button>
</body>
</html>

3. 示范演示

为了更加清晰地展示Struts2实现文件上传时显示进度条的功能，下面提供两个规范的示例供您参考：

3.1 示例一

步骤如下：

新建一个名为commons-fileupload-demo的Maven工程
在pom.xml文件中加入依赖包的声明
在src/main/java目录下创建一个名为com.commons.fileupload的包，并在该包中创建一个名为UploadAction的Action类
在src/main/webapp目录下创建一个名为index.jsp的文件，作为前端页面
在resources文件夹下创建一个名为struts.xml的配置文件，配置上传文件允许的大小和上传文件的保存路径
启动Tomcat服务器并运行，并通过浏览器打开上传文件的页面
选择要上传的文件，点击“上传”按钮，即可上传，并实时在前端页面显示出上传进度的变化

关于该示例的代码，可以访问GitHub链接进行查看和下载。

3.2 示例二

步骤如下：

新建一个名为struts2-fileupload-demo的Maven工程
在pom.xml文件中加入依赖包的声明
在src/main/java目录下创建一个名为com.struts2.fileupload的包，并在该包中创建一个名为UploadAction的Action类
在src/main/webapp目录下创建一个名为index.jsp的文件，作为前端页面
在resources文件夹下创建一个名为struts.xml的配置文件，配置上传文件允许的大小和上传文件的保存路径
在src/main/webapp目录下创建一个名为struts.xml的配置文件，配置Struts2的过滤器拦截器等信息
启动Tomcat服务器并运行，并通过浏览器打开上传文件的页面
选择要上传的文件，点击“上传”按钮，即可上传，并实时在前端页面显示出上传进度的变化