jQuery与Servlet实现文件上传与获取上传进度

最新推荐文章于 2023-03-10 11:36:13 发布

py_xin

最新推荐文章于 2023-03-10 11:36:13 发布

阅读量1.1k

点赞数 2

文章标签：文件上传上传进度 Servlet jQuery

本文链接：https://blog.csdn.net/py_xin/article/details/50432497

版权

首先实现文件上传要用到commons-fileupload-1.3.jar包

后台要3个文件：

一个负责处理上传的Servlet - FileUploadServlet

一个负责监听上传进度的类 - FileUploadProgressListener

一个负责获取上传进度的Servlet - UploadProgressServlet

FileUploadServlet很简单，doPost()方法如下：

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("******** doPost ***********");
        
        FileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(factory);
        
        // 为每个上传都设置一个新的监听器。监听器FileUploadProgressListener要自己编写
        upload.setProgressListener(new FileUploadProgressListener(request.getSession()));
        
        File file = null;
        String uploadPath = "C:\\temp\\"; //服务器上存放文件的地方
        
        try {
            List<FileItem> items = upload.parseRequest(request); // 这里开始调用FileUploadProgressListener.update()方法
            for (FileItem item : items) {
                if (null != item.getName() && item.getName().trim() != "") {
                    System.out.println("item name: " + item.getName());
                    file = new File(uploadPath + item.getName());
                    item.write(file);
                }
            }
        } catch (FileUploadException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

监听器要实现ProgressListener接口：

package com.listener;

import javax.servlet.http.HttpSession;

import org.apache.commons.fileupload.ProgressListener;

public class FileUploadProgressListener implements ProgressListener {

    private HttpSession session = null;
    
    public FileUploadProgressListener() {}
    
    public FileUploadProgressListener(HttpSession session) {
        this.session = session;
    }
    
    /**
     * pBytesRead: 已读取的字节数
     * pContentLength: 所有上传文件的字节数
     * pItems: 所有上传文件的个数
     */
    @Override
    public void update(long pBytesRead, long pContentLength, int pItems) {
        // 计算上传进度
        int percent = Math.round(((float)pBytesRead/pContentLength)*100);

        // 把上传进度存放在session里
        session.setAttribute("percent", percent);
    }

}

获取上传进度的Servlet：

package com.servlet;

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

@WebServlet("/UploadProgressServlet")
public class UploadProgressServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    public UploadProgressServlet() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	Object percent = request.getSession().getAttribute("percent");
        if (null == percent) {
            response.getWriter().write("0");
        } else {
            response.getWriter().write(String.valueOf(percent));
        }
    }

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

页面html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Servlet File Upload Demo</title>
<script type="text/javascript" src="./js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="./js/file-upload.js"></script>
</head>
<body>
<iframe id='target_upload' name='target_upload' src='' style='display: none'></iframe>
<form id="fileUploadForm" action="FileUploadServlet" enctype="multipart/form-data" method="post" target="target_upload"> <!-- 以二进制方式上传 -->
	<input type="file" name="file1" id="file1"><br>
	<input type="file" name="file1" id="file2"><br>
	<input type="file" name="file1" id="file3"><br>
</form>
<input type="button" value="上传" id="uploadBtn">
<div id="progressStatus"></div>
</body>
</html>

js代码：

$(document).ready(function () {
	$("#uploadBtn").click(upload);
});

var intervalId = 0;
function upload() {
	$("#progressStatus")[0].innerHTML = "";
	$("#fileUploadForm").submit();
	intervalId = setInterval("getProgress()", 1000); // 每隔一秒获取上传进度
}

function getProgress() {
	$.get("UploadProgressServlet", null, function(response) {
		try {
			$("#progressStatus")[0].innerHTML = response;
 
			if (response == "100") { // 若进度已为100，停止获取进度
				clearInterval(intervalId);
			}
		} catch (err) {
			alert(err.message);
		}
	});
}

部署项目的时候有个小插曲，Tomcat启动时找不到maven里的类，抛ClassNotFoundException。原因是部署时没有包含Maven Dependencies。解决方法如下：

1. 右键单击工程项目 ->点击 properties
2. 选择 Deployment Assembly
3. 点击 Add -> Java Build Path Entries -> Next
4. 选择 Maven Dependencies -> Finish -> Apply -> OK
5. Clean project and server. 重启server