很久没有更新博客了,这段时间实在的忙的不可开交,项目马上就要上线了,要修补的东西太多了。当我在学习JavaWeb文件上传的时候,我就一直有一个疑问,网站上那些博客的图片是怎么上传的,因为当提交了表单之后网页就跳转了。后来我学习到了Ajax,我知道了浏览器可以异步的发送响应,这时我又有新的疑问,那就是在我上传一些文件的时候,那些网站的上传进度是怎么做到的,因为servlet直到上传完成之后才完成响应。
最近我们的项目中有一个地方中需要用到一个功能,当用户点击一个处理按钮时,前台会实时的显示后台处理动态,由于servlet一次只能接受一个请求,而且在servlet的生命周期结束时才会把响应数据发送到前台(这一点大家可以做个这样的测试:
1
2
3
|
response.getWriter().print( "hello" );
Thread.sleep( 10000 );
response.getWriter().print( "world" );
|
你们会发现前台在等待了约10s后收到了"helloworld")。所以我想到了一个方法:使用单例保存实时信息。具体的实现方法就是,当用户点击了处理按钮时,在后台开启一个线程进行处理,并且每进行到一步,就向单例中写入当前状态信息。然后编写一个servlet,用于返回单例中的信息,前台循环发送请求,这样就能实现实时显示进度的效果。
好了,啰嗦了这么多,下面进入正题,如何实现上传文件动态显示进度,其实思想和上面的功能是一致的,我将这个功能分为三个点:
1.单例:用于保存进度信息;
2.上传servlet:用于上传文件并实时写入进度;
3.进度servlet:用于读取实时进度信息;
上代码,前台:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<!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) {
//阻止默认事件
event.preventDefault();
//循环查看状态
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);
//前台更新进度
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) {
//上传完成,清除循环事件
clearInterval(t);
//将进度更新至100%
progress.innerText = 100;
},
error: function(){
console.log("error");
}
});
return false;
});
})();
</ script >
</ body >
</ html >
|
后台,单例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
import java.util.Hashtable;
public class ProgressSingleton {
//为了防止多用户并发,使用线程安全的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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
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();
//向单例哈希表写入文件长度和初始进度
ProgressSingleton.put(id + "Size" , fileItem.getSize());
//文件进度长度
long progress = 0 ;
//用流的方式读取文件,以便可以实时的获取进度
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 ){
//每读取一次,更新一次进度大小
progress = progress + readNumber;
//向单例哈希表写入进度
ProgressSingleton.put(id + "Progress" , progress);
out.write(buffer);
}
//当文件上传完成之后,从单例中移除此次上传的状态信息
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);
}
}
|
进度servlet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
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);
}
}
|
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:http://www.cnblogs.com/dong-xu/p/6701271.html