ajax 文件上传进度条
一:方案分析
?
? ?? 基于浏览器的文件上传,为了有更好的用户体验,我们一般就设置一个旋转的图标,旋转的图标无法实时的监控文件上传情况。所以我们将实现一个如何实时的监控文件的上传。
?
参考资料:http://www.cnblogs.com/ybase/archive/2011/11/15/2249298.html?
?
技术问题分析:
如何实现上传的功能如何实现上传文件的监听功能如何实现记录上传状态的功能客户端如何状态的实时显示解决方案:
??
如何实现上传的功能? ------使用apache的FileUpload组件上传文件如何实现上传文件的监听功能 ------使用ProgressListener监听文件状态如何实现记录上传状态的功能 ------使用session保存文件的状态客户端如何状态的实时显示 -------客户端使用AJAX来查询上传的状态?
基本思路:
?
客户端:界面的提交的时候使用<iframe 来实现模拟的无刷新提交,然后在使用ajax来周期的访问servlet并返回sesson中最新的状态信息。
?
服务器端:在servlet介绍到请求的时候,区分请求的类型是上传的请求还是ajax询问的请求,如果是上传的请求,则执行上传的方法,并启动监听保存上传状态到session中。
?
?
?
?
?
?在介绍源代码之前,我们先来看看程序运行界面:
?
接下来是源文件的目录结构:
?
?
?二、实现代码
?
UploadFileProgressBar.java ------使用apache的FileUpload组件上传文件
?
?
FileUploadProgressListener------使用ProgressListener监听文件状态
?
?
?
FileUploadStatus------使用session保存文件的状态