java web 上传文件 进度条_JavaWeb项目实现文件上传动态显示进度实例

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

最近我们的项目中有一个地方中需要用到一个功能，当用户点击一个处理按钮时，前台会实时的显示后台处理动态，由于servlet一次只能接受一个请求，而且在servlet的生命周期结束时才会把响应数据发送到前台(这一点大家可以做个这样的测试：

response.getWriter().print("hello");

Thread.sleep(10000);

response.getWriter().print("world");

你们会发现前台在等待了约10s后收到了"helloworld")。所以我想到了一个方法：使用单例保存实时信息。具体的实现方法就是，当用户点击了处理按钮时，在后台开启一个线程进行处理，并且每进行到一步，就向单例中写入当前状态信息。然后编写一个servlet，用于返回单例中的信息，前台循环发送请求，这样就能实现实时显示进度的效果。

好了，啰嗦了这么多，下面进入正题，如何实现上传文件动态显示进度，其实思想和上面的功能是一致的，我将这个功能分为三个点：

1.单例：用于保存进度信息；

2.上传servlet：用于上传文件并实时写入进度；

3.进度servlet：用于读取实时进度信息；

上代码，前台：

Insert title here

#progress:after {

content: '%';

}

File upload demo

(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: {