锁定老帖子 主题:掌控上传进度的AJAX Upload
该帖已经被评为精华帖
|
|
---|---|
作者 | 正文 |
发表时间:2007-01-08
掌控上传进度的AJAX Upload
作者:cleverpig AJAX——最酷的“冲浪板” 原文永久链接及源代码下载地址: http://www.matrix.org.cn/resource/article/2007-01-08/09db6d69-9ec6-11db-ab77-2bbe780ebfbf.html 动机: 2006年底Google了一下AJAX Upload实现,结果没有发现很完整的Java实现。硕果仅存的就是TELIO公司的Pierre-Alexandre发表的《AJAX Upload progress monitor for Commons-FileUpload Example》文中提供的ajax-upload-1.0.war。 虽然上文中完成Upload工作的是Apache的Common-FileUpload组件,但在其代码中所使用的FileUpload1.1版本并没有1.2版本所提供的上传处理Listener功能,这就对检测文件上传情况造成了困难。我想正是这个原因致使Pierre-Alexandre使用了DWR+MonitoredDiskFileItem、MonitoredDiskFileItemFactory类(分别继承DiskFileItem、DiskFileItemFactory) 的方式:前者负责在web客户端进行Remote Call;后者在进行文件数据读取时统计数据总量、读取数据量、处理文件总数,并保存于Session中,以供web客户端通过DWR远程调用 UploadMonitor类的getUploadInfo方法进行轮询(Poll)。 从本人观点出发,Pierre-Alexandre实现的不足之处: 1.没有用户取消上传功能; 2.完全的DWR实现,没有使用Prototype,对于不会使用DWR的开发者来讲有一定的知识局限性,而且由于DWR的个性而造成不便将此实现集成到项目中。 Prototype+Servlet的实现: Prototype+Servlet的Example 所以出于研究Prototype之目的,本人经过仔细思考,尝试实现了一个Prototype+Servlet的简单Example。其工作流程很简单: 1.在Form提交上传文件Field的同时,使用AJAX周期性地从Servlet轮询上传状态信息; 2.然后,根据此信息更新进度条和相关文字,及时反映文件传输状态; 3.如果用户取消上传操作,则进行相应的现场清理工作:删除已经上传的文件,在Form提交页面中显示相关信息; 4.如果上传完毕,在Form提交页面中显示已经上传的文件内容(或链接),也可以与一些AJAX SlideShow应用结合在一起。 服务器端代码: Bean序列化/反序列化工作:XmlUnSerializer这个类虽然不能够通吃任何模样的Bean,但应付一般的Bean、具有Collection类型属性的Bean和Bean List来讲还是够用的。 {XmlUnSerializer类的核心方法serializeBean和serializeBeanList}:
文件上传状态Bean:使 用FileUploadStatus这个类记录文件上传状态,并将其作为服务器端与web客户端之间通信的媒介物:通过对这个类对象进行XML序列化作为 服务器回应发送给web客户端,web客户端使用JavaScript对其进行反序列化处理获得JavaScript版本的文件上传状态对象。 {FileUploadStatus的属性}:
文件上传状态监视工作:使用Common-FileUpload 1.2版本(20070103)。此版本与1.1版的区别在于提供了能够监视文件上传情况的ProcessListener接口,使开发者通过FileUploadBase类对象的setProcessListener方法植入自己的Listener,而且实现这个Listener很简单。 {FileUploadListener主要方法update}:
很清楚,我也把FileUploadStatus这个Bean存取于Session中。 Servlet实现:BackGroundService 这个Servlet类负责接收Form Post数据、回应状态轮询请求、处理取消文件上传的请求。尽管可以把这些功能相互分离开来(比如构造一个FileUploadManager类),但出 于简单明了、便于阅读之目的,还是将它们放到Servlet中,只是由不同的方法进行分割。 {BackGroundService中的processFileUpload方法用于处理文件上传请求}:
{BackGroundService中的responseFileUploadStatusPoll方法用于处理对文件上传状态的轮询请求}:
{BackGroundService中的processCancelFileUpload方法用于处理取消文件上传的请求}:
Web客户端代码: Prototype给开发者更多的自由选择 web客户端使用了基于Prototype的AjaxWrapper类和XMLDomForAjax类,前者实现了对Ajax.Request功能的封装,而后者实现了对来自服务器的XML Response的反序列化(反序列化为JavaScript对象)。 为了避免在AjaxWrapper的回调方法中发生this被重写的问题,我使用了ClassUtils类给任何类的每个方法注册一个对类对象自身引用,详见《解开JavaScript生命的达芬奇密码》和《Prototype.AjaxRequest的调用堆栈重写问题》: {ClassUtils类代码}:
{将XML反序列化为JavaScript对象的XMLDomForAjax类代码}:
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2007-01-12
|
|
返回顶楼 | |
发表时间:2007-01-20
针对反馈的问题,我发布u2版本,进行了部分改进和提升:
U2's new Feature: 1.使用独立的UploadSessionManager管理uploadSession,使后者在AJAX 和form之间共享。分离原处一处的“处理文件上传”、“状态查询”任务到UploadProcessService和 FileUploadCommandService这两个servlet中,实现上传和查询的操作分离,提高反应速度。 2.使用AJAX join命令,首先发送AJAX请求,然后进行form submit,这样可以达到session的一致; 3.增加了MyServletFileUpload类,继承与ServletFileUpload,并在其parserRequest方法中增加了cancel upload处理; 4.增加在servlet进行处理前的上传文件超限的检测能力; 5.upload和result页面完全使用AJAX+DHTML,摆脱了对JSP的依赖。 |
|
返回顶楼 | |
发表时间:2007-01-21
我也写了一个类似的控件,不过有个问题,后台只能取到整个表单的大小,没法取到文件的大小,这样在做文件上传进度的时候有点问题,另外http的文件上传好像太慢了
|
|
返回顶楼 | |
发表时间:2007-01-22
布u2版本 有错阿, 怎么提示“网络通讯失败” “获得回应失败”
|
|
返回顶楼 | |
发表时间:2007-01-23
引用 我也写了一个类似的控件,不过有个问题,后台只能取到整个表单的大小,没法取到文件的大小,这样在做文件上传进度的时候有点问题,另外http的文件上传好像太慢了 我在后台使用servlet,判断request header中的content-length,把它作为判断上传文件大小的依据。如果要进一步分析每个文件的大小,本人觉得没有必要,而且这种分析只能随着对request流的解析同时进行。 |
|
返回顶楼 | |
发表时间:2007-01-23
引用 布u2版本 有错阿, 怎么提示“网络通讯失败” “获得回应失败” 通讯失败?请把log内容贴上吧。我这里测试正常啊。 |
|
返回顶楼 | |
发表时间:2007-01-24
刚4了一下,的确是有错啊
[size=7][size=9]12:45:35,765 INFO UploadSessionManager:104 - 管理器启动中...周期=60000ms 12:45:35,796 DEBUG FileUploadCommandService:214 - session id=AD86BA7BDA54C062629F911EF35C5E71 12:45:35,812 DEBUG FileUploadCommandService:217 - 收到Join请求 12:45:35,812 DEBUG FileUploadCommandService:95 - 发送Join回应 12:45:35,828 DEBUG FileUploadStatusBeanManager:61 - 初始化文件上传状态Bean 12:45:35,828 INFO UploadSessionManager:74 - session[dikitiruvacapehehawo]被添加/更新 12:45:35,843 DEBUG Utils:93 - 从httpRequest中取出forwardURL:./result.html 12:45:35,843 DEBUG FileUploadCommandService:103 - 将会话Id[dikitiruvacapehehawo]保存在session[AD86BA7BDA54C062629F911EF35C5E71]中 12:45:45,500 ERROR [FileUploadCommandService]:253 - Servlet.service() for servlet FileUploadCommandService threw exception java.lang.NoClassDefFoundError: org/apache/commons/collections/FastHashMap at org.apache.commons.beanutils.ConvertUtilsBean.<init>(ConvertUtilsBean.java:125) at com.bjinfotech.util.objecttk.BeanUtils.<init>(BeanUtils.java:24) at com.bjinfotech.practice.ajax.XmlUnSerializer.serializeBean(XmlUnSerializer.java:141) at com.bjinfotech.practice.ajax.FileUploadCommandService.sendSerializedBean(FileUploadCommandService.java:84) at com.bjinfotech.practice.ajax.FileUploadCommandService.responseJoinRequest(FileUploadCommandService.java:104) at com.bjinfotech.practice.ajax.FileUploadCommandService.doPost(FileUploadCommandService.java:218) at com.bjinfotech.practice.ajax.FileUploadCommandService.doGet(FileUploadCommandService.java:51) at javax.servlet.http.HttpServlet.service(HttpServlet.java:689) at javax.servlet.http.HttpServlet.service(HttpServlet.java:802) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:252) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:173) at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:213) at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:178) at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:126) at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:105) at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:107) at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:148) at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:869) at org.apache.coyote.http11.Http11BaseProtocol$Http11ConnectionHandler.processConnection(Http11BaseProtocol.java:664) at org.apache.tomcat.util.net.PoolTcpEndpoint.processSocket(PoolTcpEndpoint.java:527) at org.apache.tomcat.util.net.LeaderFollowerWorkerThread.runIt(LeaderFollowerWorkerThread.java:80) at org.apache.tomcat.util.threads.ThreadPool$ControlRunnable.run(ThreadPool.java:684) at java.lang.Thread.run(Unknown Source)[/size][/size] |
|
返回顶楼 | |
发表时间:2007-01-25
在包里面有一个bjvip_quickaction.jar 不知道这个包是什么啊?能提供代码吗?
|
|
返回顶楼 | |
发表时间:2007-01-27
报“通讯出错”的朋友加入commons-collections-3.2.jar就可以了
另外发现上传2个或3个文件成功后,result页面只列出最后一个文件,这是不是bug? |
|
返回顶楼 | |