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

来源：互联网发布：js object 获取属性编辑：程序博客网时间：2024/05/02 04:27

首先实现文件上传要用到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

1 0