最新消息:

java Servlet和Jquery Ajax显示上传文件进度

Ajax/js 大步 897浏览 0评论

网页显示文件上传进度问题的分析:

显示上传进度的前提是获得上传的进度信息。我们可以想到的就是监听器,同时这有可以分两种情况:监听器可以放服务端,也可以放客户端。
下面的方法,其实更多的关键是前端,后端的话,可以用其他语言处理。
下面是对几种方法的总结:

##demo1

这种方式的服务端 使用commons FileUpload库的 ProgressListener 来监控进度,也就说进度情况是保存在服务端的,如果客户端想要知道进度,需要再次发起请求。
如果客户端想在一个页面完成,可以调用js到服务端获得 上传进度信息。
###缺点:
客户端除了要发送post请求来上传文件外,还要多次发送get请求来获取进度信息。

##demo2

demo2其实是demo1的改进版。
和demo1其实差不多,只不过demo2使用了两个servlet来处理,而demo4只是用一个servlet分别调用post和get。
这个实现客户端更新进度的方法的关键是:
这种方式的服务端 使用commons FileUpload库的 ProgressListener 来监控进度,也就说进度情况是保存在服务端的,如果客户端想要知道进度,需要再次发起请求。
将post请求中的上传进度 封装到  get请求中,然后由js发起get请求,来获得xml,解析后显示到html页面
###缺点:
客户端除了要发送post请求来上传文件外,还要多次发送get请求来获取进度信息。
参考自(他的其实是有bug,我改了很多了,没必要看了):
http://www.codeguru.com/java/article.php/c13913/AJAX-File-Upload-Progress-for-Java.htm

##demo3

使用Jquery的ajax来上传文件,关键是使用FormData对象用来上传文件
优点:方法简单
缺点: 无

##demo4

使用 ajax来上传文件,关键是使用FormData对象用来上传文件
优点:方法简单
缺点: 无

##demo5

demo5是demo4的一种特殊的情况,就是页面上没有Form元素。同样需要使用FormData对象用来上传文件
使用 ajax来上传文件,关键是使用FormData对象用来上传文件
优点:方法简单
缺点: 无
下面说的几种上传方法的上传页面可以用jsp或html,或者其他语言的。反正最后都是html,这里全用html作为上传页面。

方法一:(见demo1)

(有问题,因为只能后台看到进度,前台只有刷新才能看到进度)
通过使用commons FileUpload 和Commons IO 库实现上传和获取进度。
关键点是调用org.apache.commons.fileupload.ProgressListener来实现监听上传进度。
demo1.html:上传的页面
TestServlet.java:

这里是处理主要的文件上传,已经通过注册的ProgressListener来监听进度。

TestProgressListener.java:
该类实现了ProgressListener接口的update()方法。
但是为了效率,我们设置为每次读取大于100KB的字节数的时候,才执行一次getMessage()方法。

ProgressServlet.java:
用于显示上传的进度。

这里就是这种方法不实用的地方,因为只有刷新该ProgressServlet后,才能看到新的进度。这也是我们后面要改进的地方。

web.xml:

测试:
在demo1.html页面上传文件,前台页面:

后台就能看到进度:
访问:ProgressServlet.java 就可以看到进度,但是必须手动刷新页面才能看到更新后的进度,这不是我们想要的。

方法二:(见demo2)

客户端上传使用servlet的doPost方法,然后为了从服务器获取上传的进度,使用js来调用Servlet的doGet方法。我们在服务端将监听器存放到session中,这样保证同一个会话都能访问到进度信息。就有了方法二。
 
截图:

demo2.html:

该页面增加了js,通过js从服务端获取进度,并显示在页面上。

FileUploadServlet :
js调用该servlet的doGet方法获取进度,调用doPost方法上传文件。

FileUploadListener:

进度监听器

web.xml:

方法三:(见demo3)

方法一和方法二中,因为进度监听器都是放在服务端的,所以只能从从服务端获取进度信息,这样客户端要发起多次http请求,显然不是理想方案。那么,我们可以试着将监听器放到本地,即XMLHttpRequest对象可以设置两个监听器:
  • 设置上传监听器:   xhr.upload.addEventListener("progress", function (evt) {});
  • 设置下载监听器:   xhr.addEventListener("progress", function (evt) {});
 
这样,我们就可以直接在客户端获取到上传进度信息,http请求只需一次即可。
 
效果:
 
 
demo3.html:
 
使用Jquery Ajax上传文件和显示进度
这个已经能获取到进度,至于进度条的css之类的,可以自己定制了。

 
AjaxUploadServlet :
服务端肯定还是需要一个Servlet来处理上传的,这个不能少。
 
web.xml:

方法4和方法5(demo4和demo5)

demo4和demo5其实和demo3没太大区别。

demo4.html:

demo5.html:
demo5是demo4的一种特殊的情况,就是页面上没有Form元素。同样需要使用FormData对象用来上传文件
使用 ajax来上传文件,关键是使用FormData对象用来上传文件
所有的demo下载:
点击去git下载
来自为知笔记(Wiz)

 

转载请注明:大步's Blog » java Servlet和Jquery Ajax显示上传文件进度

SiteMap