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

很久没有更新博客了，这段时间实在的忙的不可开交，项目马上就要上线了，要修补的东西太多了。当我在学习JavaWeb文件上传的时候，我就一直有一个疑问，网站上那些博客的图片是怎么上传的，因为当提交了表单之后网页就跳转了。后来我学习到了Ajax，我知道了浏览器可以异步的发送响应，这时我又有新的疑问，那就是在我上传一些文件的时候，那些网站的上传进度是怎么做到的，因为servlet直到上传完成之后才完成响应。 最近我们的项目中有一个地方中需要用到一个功能，当用户点击一个处理按钮 0 Comments

很久没有更新博客了，这段时间实在的忙的不可开交，项目马上就要上线了，要修补的东西太多了。当我在学习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

本文链接：https://my.lmcjl.com/post/13969.html

展开阅读全文

相关文章

4 评论

留下您的评论.