JavaWeb项目实现文件上传动态显示进度实例

2019-11-26 12:37:10

字体：大中小

来源：转载

供稿：网友

很久没有更新博客了，这段时间实在的忙的不可开交，项目马上就要上线了，要修补的东西太多了。当我在学习JavaWeb文件上传的时候，我就一直有一个疑问，网站上那些博客的图片是怎么上传的，因为当提交了表单之后网页就跳转了。后来我学习到了Ajax，我知道了浏览器可以异步的发送响应，这时我又有新的疑问，那就是在我上传一些文件的时候，那些网站的上传进度是怎么做到的，因为servlet直到上传完成之后才完成响应。

最近我们的项目中有一个地方中需要用到一个功能，当用户点击一个处理按钮时，前台会实时的显示后台处理动态，由于servlet一次只能接受一个请求，而且在servlet的生命周期结束时才会把响应数据发送到前台（这一点大家可以做个这样的测试：

 response.getWriter().print("hello"); Thread.sleep(10000); response.getWriter().print("world");

你们会发现前台在等待了约10s后收到了"helloworld"）。所以我想到了一个方法：使用单例保存实时信息。具体的实现方法就是，当用户点击了处理按钮时，在后台开启一个线程进行处理，并且每进行到一步，就向单例中写入当前状态信息。然后编写一个servlet，用于返回单例中的信息，前台循环发送请求，这样就能实现实时显示进度的效果。

好了，嗦了这么多，下面进入正题，如何实现上传文件动态显示进度，其实思想和上面的功能是一致的，我将这个功能分为三个点：

1.单例：用于保存进度信息；

2.上传servlet：用于上传文件并实时写入进度；

3.进度servlet：用于读取实时进度信息；

上代码，前台：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">  #progress:after {    content: '%';  }</style></head><body>  <h3>File upload demo</h3>  <form action="TestServlet" method="post" enctype="multipart/form-data" id="dataForm">    <input type="file" name="file" id="fileInput"> <br>    <input type="submit" value="submit" id="submit">  </form>  <div id="progress"></div>  <script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>  <script type="text/javascript">  (function () {    var form = document.getElementById("dataForm");    var progress = document.getElementById("progress");        $("#submit").click(function(event) {      //阻止默认事件      event.preventDefault();      //循环查看状态      var t = setInterval(function(){        $.ajax({          url: 'ProgressServlet',          type: 'POST',          dataType: 'text',          data: {            filename: fileInput.files[0].name,          },          success: function (responseText) {            var data = JSON.parse(responseText);            //前台更新进度            progress.innerText = parseInt((data.progress / data.size) * 100);          },          error: function(){            console.log("error");          }        });      }, 500);      //上传文件      $.ajax({        url: 'UploadServlet',        type: 'POST',        dataType: 'text',        data: new FormData(form),        processData: false,        contentType: false,        success: function (responseText) {          //上传完成，清除循环事件          clearInterval(t);          //将进度更新至100%          progress.innerText = 100;        },        error: function(){          console.log("error");        }      });      return false;    });  })();  </script></body></html>

后台，单例：

import java.util.Hashtable;public class ProgressSingleton {  //为了防止多用户并发，使用线程安全的Hashtable  private static Hashtable<Object, Object> table = new Hashtable<>();    public static void put(Object key, Object value){    table.put(key, value);  }    public static Object get(Object key){    return table.get(key);  }    public static Object remove(Object key){    return table.remove(key);  }}

上传servlet:

import java.io.File;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStream;import java.util.List;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.tomcat.util.http.fileupload.FileItem;import org.apache.tomcat.util.http.fileupload.FileUploadException;import org.apache.tomcat.util.http.fileupload.disk.DiskFileItemFactory;import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload;import org.apache.tomcat.util.http.fileupload.servlet.ServletRequestContext;import singleton.ProgressSingleton;@WebServlet("/UploadServlet")public class UploadServlet extends HttpServlet {  private static final long serialVersionUID = 1L;  public UploadServlet() {  }  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        DiskFileItemFactory factory = new DiskFileItemFactory();    factory.setSizeThreshold(4*1024);        ServletFileUpload upload = new ServletFileUpload(factory);        List<FileItem> fileItems;    try {      fileItems = upload.parseRequest(new ServletRequestContext(request));      //获取文件域      FileItem fileItem = fileItems.get(0);      //使用sessionid + 文件名生成文件号      String id = request.getSession().getId() + fileItem.getName();      //向单例哈希表写入文件长度和初始进度      ProgressSingleton.put(id + "Size", fileItem.getSize());      //文件进度长度      long progress = 0;      //用流的方式读取文件，以便可以实时的获取进度      InputStream in = fileItem.getInputStream();      File file = new File("D:/test");      file.createNewFile();      FileOutputStream out = new FileOutputStream(file);      byte[] buffer = new byte[1024];      int readNumber = 0;      while((readNumber = in.read(buffer)) != -1){        //每读取一次，更新一次进度大小        progress = progress + readNumber;        //向单例哈希表写入进度        ProgressSingleton.put(id + "Progress", progress);        out.write(buffer);      }      //当文件上传完成之后，从单例中移除此次上传的状态信息      ProgressSingleton.remove(id + "Size");      ProgressSingleton.remove(id + "Progress");      in.close();      out.close();    } catch (FileUploadException e) {      e.printStackTrace();    }        response.getWriter().print("done");  }  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {    doGet(request, response);  }}

进度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;import net.sf.json.JSONObject;import singleton.ProgressSingleton;@WebServlet("/ProgressServlet")public class ProgressServlet extends HttpServlet {  private static final long serialVersionUID = 1L;      public ProgressServlet() {    super();    // TODO Auto-generated constructor stub  }  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        String id = request.getSession().getId();    String filename = request.getParameter("filename");    //使用sessionid + 文件名生成文件号，与上传的文件保持一致    id = id + filename;    Object size = ProgressSingleton.get(id + "Size");    size = size == null ? 100 : size;    Object progress = ProgressSingleton.get(id + "Progress");    progress = progress == null ? 0 : progress;     JSONObject json = new JSONObject();    json.put("size", size);    json.put("progress", progress);    response.getWriter().print(json.toString());  }  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {    doGet(request, response);  }}

效果图：