springmvc+ajax实现文件上传进度监控

最新推荐文章于 2021-02-26 20:39:17 发布

zhangAicao

最新推荐文章于 2021-02-26 20:39:17 发布

阅读量416

点赞数 2

分类专栏： springmvc文件上传文章标签： java spring jquery css html

本文链接：https://blog.csdn.net/zhangaicao/article/details/108702170

版权

springmvc文件上传专栏收录该内容

1 篇文章 0 订阅

订阅专栏

springmvc+ajax实现文件上传进度监控

做此文章的原因：首先我是为初学者写的，我也是初学者。大神勿喷。当时我想学这个文件上传进度条显示的功能时，我会百度一波,然后一大堆的资源和解决方案…然后一波骚操作，crtl+c，crtl+v,感觉要成功的时候，各种报错，最后还是没搞出来。
所以这我也是花了两天才弄出来，真心辛苦。。。。。
这个涉及很多知识：有前端的JavaScript，html，ajax，
后端的springmvc，java,maven,Tomcat，servlet等
所以容易出错。已经很详细了，不行的话就支持一下，下载源码吧。
开发思路:

我们在web前端使用ajax_1(文件上传)异步请求服务器，将form表单以post的发送方式，发给java后端。Java后端进行文件的读写，将上传的文件保存到服务器。因为文件读写是需要一定时间处理的，所以为了提高用户体验，我们通过将读写的进度(存到session，session可以共享)。于是我们另起一个ajax_2用于轮询另一个@RequestMapping，不断请求获得进度，反应给web前端显示。
那我们怎么拿到文件读写的进度反馈呢？。
核心就是：springmvc的org.springframework.web.multipart.commons.CommonsMultipartResolver;
这个类，和commonsIo提供的
org.apache.commons.fileupload.ProgressListener这个接口。
还有控制层Controller的两个映射处理方法
-一个是上传文件的处理方法
-一个是监控进度（web前端采用轮询的方式）不断请求这个方法获取最新进度
5：现贴出Java后端的核心代码
写一个类 XcCommonsMultipartResolver 继承 CommonsMultipartResolver

package com.zhang.service;

import org.apache.commons.fileupload.*;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.springframework.web.multipart.MaxUploadSizeExceededException;
import org.springframework.web.multipart.MultipartException;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.List;

public class XcCommonsMultipartResolver extends CommonsMultipartResolver {

    private HttpServletRequest request;

    protected FileUpload newFileUpload(FileItemFactory fileItemFactory) {
        System.out.println("====1=====");
        ServletFileUpload upload = new ServletFileUpload(fileItemFactory);
        upload.setSizeMax(-1);
        if (request != null) {
            HttpSession session = request.getSession();
            XcProgressListener uploadProgressListener = new XcProgressListener(session);
            upload.setProgressListener(uploadProgressListener);
        }
        return upload;
    }

    public MultipartHttpServletRequest resolveMultipart(HttpServletRequest request) throws MultipartException {
        System.out.println("====2=====");

        this.request = request;// 获取到request,要用到session
        return super.resolveMultipart(request);
    }

    @Override
    public MultipartParsingResult parseRequest(HttpServletRequest request) throws MultipartException {
        System.out.println("====3=====");

        HttpSession session = request.getSession();

        String encoding = "utf-8";
        FileUpload fileUpload = prepareFileUpload(encoding);

        XcProgressListener uploadProgressListener = new XcProgressListener(session);
        fileUpload.setProgressListener(uploadProgressListener);
        try {
            List<FileItem> fileItems = ((ServletFileUpload) fileUpload).parseRequest(request);
            return parseFileItems(fileItems, encoding);
        } catch (FileUploadBase.SizeLimitExceededException ex) {
            throw new MaxUploadSizeExceededException(fileUpload.getSizeMax(), ex);
        } catch (FileUploadException ex) {
            throw new MultipartException("Could not parse multipart servlet request", ex);
        }
    }
}

```java
在这里插入代码片

----- 写一个类XcProgressListener 实现 ProgressListener

package com.zhang.service;

import com.zhang.entity.ProgressEntity;
import org.apache.commons.fileupload.ProgressListener;

import javax.servlet.http.HttpSession;

public class XcProgressListener implements ProgressListener {
    private HttpSession session;

    public XcProgressListener() {
    }

    public XcProgressListener(HttpSession _session) {
        session = _session;
        ProgressEntity ps = new ProgressEntity();
        session.setAttribute("upload_ps", ps);
    }

    public void update(long pBytesRead, long pContentLength, int pItems) {
        ProgressEntity ps = (ProgressEntity) session.getAttribute("upload_ps");
        ps.setpBytesRead(pBytesRead);
        ps.setpContentLength(pContentLength);
        ps.setpItems(pItems);
//        System.out.println(ps);
        // 更新
        session.setAttribute("upload_ps", ps);
    }

}

控制器：

@RequestMapping(value = "/upload", method = RequestMethod.POST)
    public void upload(String picname,HttpServletRequest request,HttpServletResponse response, @RequestParam("uploadFile") MultipartFile uploadFile) throws IOException {
        String filename = "";
        //1:拿到文件全名包括扩展名如：2131ddfsdf.png
        String uploadFileName = uploadFile.getOriginalFilename();
        String extendName = uploadFileName.substring(uploadFileName.lastIndexOf(".")+1,uploadFileName.length());
        String uuid = UUID.randomUUID().toString().replace("-","").toUpperCase();
        if (!StringUtils.isEmpty(picname)) {
            filename = uuid+"_"+picname+"."+extendName;
        }else {
            filename = uuid+"_"+uploadFileName;
        }
        //2:为了防止文件名重复 进行了文件名处理
        System.out.println(filename);
        ServletContext context = request.getSession().getServletContext();
        String basepath = context.getRealPath("/uploads");
        String datePath = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
        File file = new File(basepath+"/"+datePath);
        if (!file.exists()) {
            file.mkdirs();
        }
        uploadFile.transferTo(new File(file,filename));

//        Cookie cookie = new Cookie("picname",picname);
//        response.addCookie(cookie);
        response.getWriter().write("上传成功");
    }

    @RequestMapping("/getProgressPercent")
    public @ResponseBody ProgressEntity getProgressPercent(HttpServletResponse response,HttpServletRequest request) throws IOException {
        HttpSession session =request.getSession();
        ProgressEntity progressEntity =(ProgressEntity)session.getAttribute("upload_ps");
        return  progressEntity;

    }

web.xml

<!DOCTYPE web-app PUBLIC
        "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
        "http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
    <display-name>Archetype Created Web Application</display-name>

    <servlet>
        <servlet-name>dispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>dispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <init-param>
            <param-name>forceEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

</web-app>

springmvc.xml
注意：为了获得监控进度，我们不是继承了CommonsMultipartResolver 这个文件上传解析器的类么，所以在xml我们用XcCommonsMultipartResolver 这个类替换原先的CommonsMultipartResolver 。看springmvc.xml所示

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="
        http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <!--开启注解扫描-->
   <context:component-scan base-package="com.zhang.controllers"></context:component-scan>
    <!--视图解析器对象-->
    <bean id="internalResourceViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!--跳转的路径前缀-->
        <property name="prefix" value="/WEB-INF/pages/"></property>
        <!--跳转的路径后缀-->
        <property name="suffix" value=".jsp"/>
    </bean>
    <!--注册字符串转日期的转换器-->
    <bean id="converterFactory" class="org.springframework.context.support.ConversionServiceFactoryBean">
        <property name="converters">
            <set>
                <bean id="StringToDataConverter" class="com.zhang.tools.StringToDateConvertor"></bean>
            </set>
        </property>
    </bean>
    <!--配置文件上传解析器-->
    <!--开启springmvc框架注解的支持-->
    <!--<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">-->
        <!--<property name="maxUploadSize">-->
            <!--<value>5242800</value>-->
        <!--</property>-->
    <!--</bean>-->
    <bean id="multipartResolver" class="com.zhang.service.XcCommonsMultipartResolver">
        <property name="maxUploadSize" value="1048576000" /><!-- 上传文件大小上限，单位为字节（1MB） -->
        <property name="defaultEncoding" value="UTF-8" /><!-- 请求的编码格式，必须和jSP的pageEncoding属性一致，以便正确读取表单的内容，默认为ISO-8859-1 -->
    </bean>
    <mvc:annotation-driven/>
    <mvc:default-servlet-handler/>


</beans>

大概理解了一下后端这几块的作用：
首先在springmvc的环境下。我们web前端的请求会被springmvc映射器和视图解析器处理。即：通过@RequestMapping（‘/upload’）和请求路径匹配成功，找到Controller层对应的处理方法。执行我们文件上传的这个处理方法的大致流程：XcCommonsMultipartResolver 类（文件上传解析器）中方法的执行顺序
—2-----3-----1–
可以看出，解析器它拿到先拿到HttpServletRequest—然后–从request拿到session–将session给监听类，拿到监听类和监听类的方法。调监听类的update（）方法将最新进度写到session。
于是web前端的另一个请求进度的ajax就不断的请求获取session中的最新进度值。

现贴出
web前端代码

<%@ page import="com.zhang.entity.ProgressEntity" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/14/0014
  Time: 17:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<html>
<head>
</head>
<body>
<script type="text/javascript" src="<%=basePath%>/js/jquery-1.11.3.min.js"></script>

<title>Title</title>
hello!欢迎登录！---
<%--<form action="testMode">--%>
<%--用户名：<input type="text" name="name"> <br/>--%>
<%--密码：<input type="text" name="password"> <br/>--%>
<%--<input type="submit" value="登录">--%>

<h2>文件上传</h2>
<form id="tf" enctype="multipart/form-data">
    定义文件名: <input type="text" name="picname"><br/>
    请选择文件: <input type="file" name="uploadFile"><br/>
    <input type="button" value="上传" onclick="test()">
</form>
<div style="display: flex">
    <div>进度条：</div>
    <div style="width: 100px;height:18px;border: 1px solid rebeccapurple">
        <div id="showPercent"
             style="width:0;height: 100%;background-color: greenyellow;text-align: center;line-height: 100px;"></div>
    </div>
</div>


<script>
    var percent = 0;
    var t = null;
    var showPercent = document.getElementById("showPercent");

    function test() {
        console.log("上传开始....");
        showPercent.innerText =  "0%";
        showPercent.style.width = "0%";
        t = setInterval(function () {
            $.ajax({
                type: "post",
                url: "getProgressPercent",
                contentType: "application/json;charset=utf-8",
                data: null,
                dataType: "json",
                success: function (data) {
                    percent = Math.floor(data.pBytesRead / data.pContentLength * 100);
                    showPercent.innerText = percent + "%";
                    showPercent.style.width = percent + "%";
                }

            });
        }, 200);
        var form = new FormData(document.getElementById("tf"));
        $.ajax({
            url: "upload",
            type: "post",
            data: form,
            processData: false, //默认情况下，processData 的值是 true，其代表以对象的形式上传的数据都会被转换为字符串的形式上传。而当上传文件的时候，则不需要把其转换为字符串，因此要改成false
            contentType: false,
            success: function (data) {
                console.log(data);
                showPercent.innerText = "100%";
                showPercent.style.width = "100%";
                clearInterval(t)
            }
        });

    }

</script>


</body>
</html>

maven依赖

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>MavenSSMProject</groupId>
    <artifactId>mavenweb</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <name>mavenweb Maven Webapp</name>
    <!-- FIXME change it to the project's website -->
    <url>http://www.example.com</url>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
        <spring.version>5.0.2.RELEASE</spring.version>
    </properties>

    <dependencies>
        <!--springmvc依赖===========================================jar 开始-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.0</version>
            <scope>provided</scope>
        </dependency>
        <!--springmvc依赖===========================================jar 结束-->
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.9.9</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.9.9</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.9</version>
        </dependency>

    </dependencies>


    <build>
        <finalName>mavenweb</finalName>
        <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
            <plugins>
                <plugin>
                    <artifactId>maven-clean-plugin</artifactId>
                    <version>3.1.0</version>
                </plugin>
                <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
                <plugin>
                    <artifactId>maven-resources-plugin</artifactId>
                    <version>3.0.2</version>
                </plugin>
                <plugin>
                    <artifactId>maven-compiler-plugin</artifactId>
                    <version>3.8.0</version>
                </plugin>
                <plugin>
                    <artifactId>maven-surefire-plugin</artifactId>
                    <version>2.22.1</version>
                </plugin>
                <plugin>
                    <artifactId>maven-war-plugin</artifactId>
                    <version>3.2.2</version>
                </plugin>
                <plugin>
                    <artifactId>maven-install-plugin</artifactId>
                    <version>2.5.2</version>
                </plugin>
                <plugin>
                    <artifactId>maven-deploy-plugin</artifactId>
                    <version>2.8.2</version>
                </plugin>
            </plugins>
        </pluginManagement>
    </build>
</project>

zhangAicao

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
springmvc+ajax实现文件上传进度监控

springmvc+ajax实现文件上传进度监控做此文章的原因：首先我是为初学者写的，我也是初学者。大神勿喷。当时我想学这个文件上传进度条显示的功能时，我会百度一波,然后一大堆的资源和解决方案…然后一波骚操作，crtl+c，crtl+v,感觉要成功的时候，各种报错，最后还是没搞出来。所以这我也是花了两天才弄出来，真心辛苦。。。。。这个涉及很多知识：有前端的JavaScript，html，ajax，后端的springmvc，java,maven,Tomcat，servlet等所以容易出错。已经很详细
复制链接

扫一扫