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

    我学习JavaWeb文件上传的时候，我就一直有一个疑问，网站上那些博客的图片是怎么上传的，因为当提交了表单之后网页就跳转了。后来我学习到了Ajax，我知道了浏览器可以异步的发送响应，这时我又有新的疑问，那就是在我上传一些文件的时候，那些网站的上传进度是怎么做到的，因为servlet直到上传完成之后才完成响应。

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

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

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

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

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

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

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

　　上代码，前台：

 1  2  3  4  5  6  7     #progress:after { 8         content: '%'; 9     }10 11 12 13     
File upload demo
14     15          
16         17     18     

19     20     21     (function () {22         var form = document.getElementById("dataForm");23         var progress = document.getElementById("progress");24         25         $("#submit").click(function(event) {26             //阻止默认事件27             event.preventDefault();28             //循环查看状态29             var t = setInterval(function(){30                 $.ajax({31                     url: 'ProgressServlet',32                     type: 'POST',33                     dataType: 'text',34                     data: {35                         filename: fileInput.files[0].name,36                     },37                     success: function (responseText) {38                         var data = JSON.parse(responseText);39                         //前台更新进度40                         progress.innerText = parseInt((data.progress / data.size) * 100);41                     },42                     error: function(){43                         console.log("error");44                     }45                 });46             }, 500);47             //上传文件48             $.ajax({49                 url: 'UploadServlet',50                 type: 'POST',51                 dataType: 'text',52                 data: new FormData(form),53                 processData: false,54                 contentType: false,55                 success: function (responseText) {56                     //上传完成，清除循环事件57                     clearInterval(t);58                     //将进度更新至100%59                     progress.innerText = 100;60                 },61                 error: function(){62                     console.log("error");63                 }64             });65             return false;66         });67     })();68     69 70 

　　后台，单例：

 1 import java.util.Hashtable; 2  3 public class ProgressSingleton { 4     //为了防止多用户并发，使用线程安全的Hashtable 5     private static Hashtable table = new Hashtable<>(); 6      7     public static void put(Object key, Object value){ 8         table.put(key, value); 9     }10     11     public static Object get(Object key){12         return table.get(key);13     }14     15     public static Object remove(Object key){16         return table.remove(key);17     }18 }

　　上传servlet:

 1 import java.io.File; 2 import java.io.FileOutputStream; 3 import java.io.IOException; 4 import java.io.InputStream; 5 import java.util.List; 6  7 import javax.servlet.ServletException; 8 import javax.servlet.annotation.WebServlet; 9 import javax.servlet.http.HttpServlet;10 import javax.servlet.http.HttpServletRequest;11 import javax.servlet.http.HttpServletResponse;12 13 import org.apache.tomcat.util.http.fileupload.FileItem;14 import org.apache.tomcat.util.http.fileupload.FileUploadException;15 import org.apache.tomcat.util.http.fileupload.disk.DiskFileItemFactory;16 import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload;17 import org.apache.tomcat.util.http.fileupload.servlet.ServletRequestContext;18 19 import singleton.ProgressSingleton;20 21 @WebServlet("/UploadServlet")22 public class UploadServlet extends HttpServlet {23     private static final long serialVersionUID = 1L;24 25     public UploadServlet() {26     }27 28     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {29         30         DiskFileItemFactory factory = new DiskFileItemFactory();31         factory.setSizeThreshold(4*1024);32         33         ServletFileUpload upload = new ServletFileUpload(factory);34         35         List fileItems;36         try {37             fileItems = upload.parseRequest(new ServletRequestContext(request));38             //获取文件域39             FileItem fileItem = fileItems.get(0);40             //使用sessionid + 文件名生成文件号41             String id = request.getSession().getId() + fileItem.getName();42             //向单例哈希表写入文件长度和初始进度43             ProgressSingleton.put(id + "Size", fileItem.getSize());44             //文件进度长度45             long progress = 0;46             //用流的方式读取文件，以便可以实时的获取进度47             InputStream in = fileItem.getInputStream();48             File file = new File("D:/test");49             file.createNewFile();50             FileOutputStream out = new FileOutputStream(file);51             byte[] buffer = new byte[1024];52             int readNumber = 0;53             while((readNumber = in.read(buffer)) != -1){54                 //每读取一次，更新一次进度大小55                 progress = progress + readNumber;56                 //向单例哈希表写入进度57                 ProgressSingleton.put(id + "Progress", progress);58                 out.write(buffer);59             }60             //当文件上传完成之后，从单例中移除此次上传的状态信息61             ProgressSingleton.remove(id + "Size");62             ProgressSingleton.remove(id + "Progress");63             in.close();64             out.close();65         } catch (FileUploadException e) {66             e.printStackTrace();67         }68         69         response.getWriter().print("done");70     }71 72     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {73         doGet(request, response);74     }75 76 }

　　进度servlet：

 1 import java.io.IOException; 2  3 import javax.servlet.ServletException; 4 import javax.servlet.annotation.WebServlet; 5 import javax.servlet.http.HttpServlet; 6 import javax.servlet.http.HttpServletRequest; 7 import javax.servlet.http.HttpServletResponse; 8  9 import net.sf.json.JSONObject;10 import singleton.ProgressSingleton;11 12 @WebServlet("/ProgressServlet")13 public class ProgressServlet extends HttpServlet {14     private static final long serialVersionUID = 1L;15        16     public ProgressServlet() {17         super();18         // TODO Auto-generated constructor stub19     }20 21     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {22         23         String id = request.getSession().getId();24         String filename = request.getParameter("filename");25         //使用sessionid + 文件名生成文件号，与上传的文件保持一致26         id = id + filename;27         Object size = ProgressSingleton.get(id + "Size");28         size = size == null ? 100 : size;29         Object progress = ProgressSingleton.get(id + "Progress");30         progress = progress == null ? 0 : progress; 
31         JSONObject json = new JSONObject();32         json.put("size", size);33         json.put("progress", progress);34         response.getWriter().print(json.toString());35     }36 37     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {38         doGet(request, response);39     }40 41 }

　　效果图：