快捷導(dǎo)航

JavaWeb項目實現(xiàn)文件上傳動態(tài)顯示進(jìn)度實例

更新時間：2017年04月13日 08:14:48 作者：DongXv

本篇文章主要介紹了JavaWeb項目實現(xiàn)文件上傳動態(tài)顯示進(jìn)度實例，具有一定的參考價值，有興趣的可以了解一下。

很久沒有更新博客了，這段時間實在的忙的不可開交，項目馬上就要上線了，要修補的東西太多了。當(dāng)我在學(xué)習(xí)JavaWeb文件上傳的時候，我就一直有一個疑問，網(wǎng)站上那些博客的圖片是怎么上傳的，因為當(dāng)提交了表單之后網(wǎng)頁就跳轉(zhuǎn)了。后來我學(xué)習(xí)到了Ajax，我知道了瀏覽器可以異步的發(fā)送響應(yīng)，這時我又有新的疑問，那就是在我上傳一些文件的時候，那些網(wǎng)站的上傳進(jìn)度是怎么做到的，因為servlet直到上傳完成之后才完成響應(yīng)。

最近我們的項目中有一個地方中需要用到一個功能，當(dāng)用戶點擊一個處理按鈕時，前臺會實時的顯示后臺處理動態(tài)，由于servlet一次只能接受一個請求，而且在servlet的生命周期結(jié)束時才會把響應(yīng)數(shù)據(jù)發(fā)送到前臺（這一點大家可以做個這樣的測試：

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

你們會發(fā)現(xiàn)前臺在等待了約10s后收到了"helloworld"）。所以我想到了一個方法：使用單例保存實時信息。具體的實現(xiàn)方法就是，當(dāng)用戶點擊了處理按鈕時，在后臺開啟一個線程進(jìn)行處理，并且每進(jìn)行到一步，就向單例中寫入當(dāng)前狀態(tài)信息。然后編寫一個servlet，用于返回單例中的信息，前臺循環(huán)發(fā)送請求，這樣就能實現(xiàn)實時顯示進(jìn)度的效果。

好了，啰嗦了這么多，下面進(jìn)入正題，如何實現(xiàn)上傳文件動態(tài)顯示進(jìn)度，其實思想和上面的功能是一致的，我將這個功能分為三個點：

1.單例：用于保存進(jìn)度信息；

2.上傳servlet：用于上傳文件并實時寫入進(jìn)度；

3.進(jìn)度servlet：用于讀取實時進(jìn)度信息；

上代碼，前臺：

<!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) {
      //阻止默認(rèn)事件
      event.preventDefault();
      //循環(huán)查看狀態(tài)
      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);
            //前臺更新進(jìn)度
            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) {
          //上傳完成，清除循環(huán)事件
          clearInterval(t);
          //將進(jìn)度更新至100%
          progress.innerText = 100;
        },
        error: function(){
          console.log("error");
        }
      });
      return false;
    });
  })();
  </script>
</body>
</html>

后臺，單例：

import java.util.Hashtable;

public class ProgressSingleton {
  //為了防止多用戶并發(fā)，使用線程安全的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();
      //向單例哈希表寫入文件長度和初始進(jìn)度
      ProgressSingleton.put(id + "Size", fileItem.getSize());
      //文件進(jìn)度長度
      long progress = 0;
      //用流的方式讀取文件，以便可以實時的獲取進(jìn)度
      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){
        //每讀取一次，更新一次進(jìn)度大小
        progress = progress + readNumber;
        //向單例哈希表寫入進(jìn)度
        ProgressSingleton.put(id + "Progress", progress);
        out.write(buffer);
      }
      //當(dāng)文件上傳完成之后，從單例中移除此次上傳的狀態(tài)信息
      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);
  }

}

進(jìn)度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);
  }

}

效果圖：