很久没有更新博客了,这段时间实在的忙的不可开交,项目马上就要上线了,要修补的东西太多了。当我在学习JavaWeb文件上传的时候,我就一直有一个疑问,网站上那些博客的图片是怎么上传的,因为当提交了表单之后网页就跳转了。后来我学习到了Ajax,我知道了浏览器可以异步的发送响应,这时我又有新的疑问,那就是在我上传一些文件的时候,那些网站的上传进度是怎么做到的,因为servlet直到上传完成之后才完成响应。
最近我们的项目中有一个地方中需要用到一个功能,当用户点击一个处理按钮时,前台会实时的显示后台处理动态,由于servlet一次只能接受一个请求,而且在servlet的生命周期结束时才会把响应数据发送到前台(这一点大家可以做个这样的测试:
1 response.getWriter().print("hello");2 Thread.sleep(10000);3 response.getWriter().print("world");
,你们会发现前台在等待了约10s后收到了"helloworld")。所以我想到了一个方法:使用单例保存实时信息。具体的实现方法就是,当用户点击了处理按钮时,在后台开启一个线程进行处理,并且每进行到一步,就向单例中写入当前状态信息。然后编写一个servlet,用于返回单例中的信息,前台循环发送请求,这样就能实现实时显示进度的效果。
好了,啰嗦了这么多,下面进入正题,如何实现上传文件动态显示进度,其实思想和上面的功能是一致的,我将这个功能分为三个点:
单例:用于保存进度信息;
上传servlet:用于上传文件并实时写入进度;
进度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<Object, Object> 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<FileItem> 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 }
效果图:
http://www.cnblogs.com/dong-xu/p/6701271.html