JavaWeb项目实现文件上传动态显示进度-演道网
2009 年 9 月 3 日
当我在学习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 <metacharset=”UTF-8″>
5 <title>Insert title heretitle>
6 <styletype=”text/css”>
7 #progress:after{
8 content: ‘%’;
9 }
10 style>
11 head>
12 <body>
13 <h3>File upload demoh3>
14 <formaction=”TestServlet” method=”post” enctype=”multipart/form-data” id=”dataForm”>
15 <inputtype=”file” name=”file” id=”fileInput”> <br>
16 <inputtype=”submit” value=”submit” id=”submit”>
17 form>
18 <divid=”progress”>div>
19 <scripttype=”text/javascript” src=”scripts/jquery-1.9.1.min.js”>script>
20 <scripttype=”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>
2 <html>
3 <head>
4 <metacharset=”UTF-8″>
5 <title>Insert title heretitle>
6 <styletype=”text/css”>
7 #progress:after{
8 content: ‘%’;
9 }
10 style>
11 head>
12 <body>
13 <h3>File upload demoh3>
14 <formaction=”TestServlet” method=”post” enctype=”multipart/form-data” id=”dataForm”>
15 <inputtype=”file” name=”file” id=”fileInput”> <br>
16 <inputtype=”submit” value=”submit” id=”submit”>
17 form>
18 <divid=”progress”>div>
19 <scripttype=”text/javascript” src=”scripts/jquery-1.9.1.min.js”>script>
20 <scripttype=”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 }
2
3 public class ProgressSingleton {
4 //为了防止多用户并发，使用线程安全的Hashtable
5 private static 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 }
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
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 stub
19 }
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 }
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 stub
19 }
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://go2live.cn
About The Author
bjmayor
程序员，码农，php,python,ios,android,go，产品经理，创业。