进度条

最新推荐文章于 2024-06-16 15:09:53 发布

it_grong

最新推荐文章于 2024-06-16 15:09:53 发布

阅读量250

点赞数

分类专栏：源码文章标签：上传文件-进度条

本文链接：https://blog.csdn.net/gr1021/article/details/78798356

版权

源码专栏收录该内容

3 篇文章 0 订阅

订阅专栏

上传文件时的进度条显示：

package com.itheima.servlet;
import java.io.File;
import java.io.IOException;
import java.text.NumberFormat;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.ProgressListener;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
/**
 * 上传文件的进度条Servlet
 */
public class UploadServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(final HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try{
        //创建磁盘文件工厂
        DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();
        //创建核心解析类
        ServletFileUpload fileUpload = new ServletFileUpload(diskFileItemFactory);
        //解决中文乱码问题
        fileUpload.setHeaderEncoding("UTF-8");

        fileUpload.setProgressListener(new ProgressListener() {

            /**
             * 参数1:当前已经上传的大小
             * 参数2:文件的总大小
             */
            @Override
            public void update(long pBytesRead, long pContentLength, int pItems) {
                double progress = Double.parseDouble(pBytesRead+"")/Double.parseDouble(pContentLength+"");
                //获得百分比格式化的对象
                NumberFormat format = NumberFormat.getPercentInstance();
                //保留小数的尾数
                format.setMaximumFractionDigits(2);
                //进行数字的格式化
                String progress_str = format.format(progress);
                System.out.println(progress_str);
                //System.out.println("Double:"+progress);
                //将进度的数据放到Session
                request.getSession().setAttribute("progress",progress_str);
            }
        });

        //利用核心解析类解析request对象
        List<FileItem> list = fileUpload.parseRequest(request);
        //遍历集合
        for (FileItem fileItem : list) {
            if(!fileItem.isFormField()){
                //文件项
                String filename = fileItem.getName();
                fileItem.write(new File("F:\\asd",filename));
            }
        }
        response.sendRedirect(request.getContextPath()+"/success.jsp");
        }catch(Exception e){
            e.printStackTrace();
            throw new RuntimeException();
        }
    }

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

}

将进度页面回显到前台页面上：

package com.itheima.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 */
public class GetProgressServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //从session中获取数据
        String progress = (String) request.getSession().getAttribute("progress");
        response.getWriter().println(progress);

    }

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

}

前端页面：
index.jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    /* $(function(){
        //开启定时器
        setInterval("changeWidth()", 10);

    });
    var len = 0;
    function changeWidth(){
        if(len<=100){
            $("#div1").css("width",len+"%");
            $("#sp1").text("当前进度:"+len+"%");
            len++;
        }       
    } */


    //与文件上传的进度联系起来
    $(function(){
        $("#form1").submit(function(){
            //设置定时器
            setInterval("getProgress()", 10);
        });
    });
    //通过异步的方式获得数据上传的进度
    function getProgress(){
        $.post("${pageContext.request.contextPath}/GetProgressServlet",function(data){
            //div的宽度
            $("#div1").css("width",data);
        });
    }
</script>
</head>
<body>
    <div id="div1" style="background-color: blue;height: 18px;width: 0%">
    </div>
    <span id="sp1"></span>
    <form id="form1" action="${pageContext.request.contextPath }/UploadServlet" method="post" enctype="multipart/form-data">
        文件描述：<input type="text" name="'desc"> <br>
        文件项：<input type="file" name="file"> <br>
        <input type="submit" value="上传">
    </form>

</body>
</html>

上传成功页面：
success.jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
文件上传成功
</body>
</html>

导入js文件：jQuery-1.8.3.js
jar包:
c3p0-0.9.1.2.jar
commons-dbutils-1.4.jar
commons-fileupload-1.2.1.jar
commons-io-1.4.jar
jstl.jar
mysql-connector-java-5.0.8-bin.jar