很久没有更新博客了,这段时间实在的忙的不可开交,项目马上就要上线了,要修补的东西太多了。当我在学习 Javaweb 文件上传的时候,我就一直有一个疑问,网站上那些博客的图片是怎么上传的,因为当提交了表单之后网页就跳转了。后来我学习到了 Ajax,我知道了浏览器可以异步的发送响应,这时我又有新的疑问,那就是在我上传一些文件的时候,那些网站的上传进度是怎么做到的,因为 servlet 直到上传完成之后才完成响应。
最近我们的项目中有一个地方中需要用到一个功能,当用户点击一个处理按钮时,前台会实时的显示后台处理动态,由于 servlet 一次只能接受一个请求,而且在 servlet 的生命周期结束时才会把响应数据发送到前台(这一点大家可以做个这样的测试:
- 1response.getWriter().print("hello");
- 2Thread.sleep(10000);
- 3response.getWriter().print("world");
,你们会发现前台在等待了约 10s 后收到了 "helloworld")。所以我想到了一个方法:使用单例保存实时信息。具体的实现方法就是,当用户点击了处理按钮时,在后台开启一个线程进行处理,并且每进行到一步,就向单例中写入当前状态信息。然后编写一个 servlet,用于返回单例中的信息,前台循环发送请求,这样就能实现实时显示进度的效果。
好了,啰嗦了这么多,下面进入正题,如何实现上传文件动态显示进度,其实思想和上面的功能是一致的,我将这个功能分为三个点:
上代码,前台:
- 1 <!DOCTYPE html>
- 2 <html>
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>Insert title here</title>
- 6 <style type="text/CSS">
- 7 #progress:after {
- 8 content: '%';
- 9 }
- 10 </style>
- 11 </head>
- 12 <body>
- 13 <h3>File upload demo</h3>
- 14 <form action="TestServlet" method="post" enctype="multipart/form-data" id="dataForm">
- 15 <input type="file" name="file" id="fileInput"> <br>
- 16 <input type="submit" value="submit" id="submit">
- 17 </form>
- 18 <div id="progress"></div>
- 19 <script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
- 20 <script type="text/javascript">
- 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 </script>
- 69 </body>
- 70 </html>
后台,单例:
- 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 classUploadServletextends HttpServlet {
- 23 private static final longserialVersionUID = 1L;
- 24
- 25 public UploadServlet() {
- 26 }
- 27
- 28 protected voiddoGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
- 29
- 30DiskFileItemFactory factory =new DiskFileItemFactory();
- 31factory.setSizeThreshold(4*1024);
- 32
- 33ServletFileUpload upload =new ServletFileUpload(factory);
- 34
- 35List fileItems;
- 36 try {
- 37fileItems = upload.parseRequest(new ServletRequestContext(request));
- 38 //获取文件域
- 39FileItem fileItem = fileItems.get(0);
- 40 //使用sessionid + 文件名生成文件号
- 41String id = request.getSession().getId() + fileItem.getName();
- 42 //向单例哈希表写入文件长度和初始进度
- 43ProgressSingleton.put(id + "Size", fileItem.getSize());
- 44 //文件进度长度
- 45 longprogress = 0;
- 46 //用流的方式读取文件,以便可以实时的获取进度
- 47InputStream in = fileItem.getInputStream();
- 48File file =newFile("D:/test");
- 49 file.createNewFile();
- 50FileOutputStream out =new FileOutputStream(file);
- 51 byte[] buffer =new byte[1024];
- 52 intreadNumber = 0;
- 53 while((readNumber = in.read(buffer)) != -1){
- 54 //每读取一次,更新一次进度大小
- 55progress = progress + readNumber;
- 56 //向单例哈希表写入进度
- 57ProgressSingleton.put(id + "Progress", progress);
- 58 out.write(buffer);
- 59 }
- 60 //当文件上传完成之后,从单例中移除此次上传的状态信息
- 61ProgressSingleton.remove(id + "Size");
- 62ProgressSingleton.remove(id + "Progress");
- 63 in.close();
- 64 out.close();
- 65}catch (FileUploadException e) {
- 66 e.printStackTrace();
- 67 }
- 68
- 69response.getWriter().print("done");
- 70 }
- 71
- 72 protected voiddoPost(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 classProgressServletextends HttpServlet {
- 14 private static final longserialVersionUID = 1L;
- 15
- 16 public ProgressServlet() {
- 17 super();
- 18 // TODO Auto-generated constructor stub
- 19 }
- 20
- 21 protected voiddoGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
- 22
- 23String id = request.getSession().getId();
- 24String filename = request.getParameter("filename");
- 25 //使用sessionid + 文件名生成文件号,与上传的文件保持一致
- 26id = id + filename;
- 27Object size = ProgressSingleton.get(id + "Size");
- 28size = size ==null100 : size;
- 29Object progress = ProgressSingleton.get(id + "Progress");
- 30progress = progress ==null0 : progress;
- 31JSONObject json =new JSONObject();
- 32json.put("size", size);
- 33json.put("progress", progress);
- 34 response.getWriter().print(json.toString());
- 35 }
- 36
- 37 protected voiddoPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
- 38 doGet(request, response);
- 39 }
- 40
- 41}
效果图:
来源: http://www.cnblogs.com/dong-xu/p/6701271.html