论坛首页 Web前端技术论坛

掌控上传进度的AJAX Upload

浏览 66924 次
该帖已经被评为精华帖
作者 正文
   发表时间:2007-01-08  
掌控上传进度的AJAX Upload

作者:cleverpig

image
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类(分别继承DiskFileItemDiskFileItemFactory) 的方式:前者负责在web客户端进行Remote Call;后者在进行文件数据读取时统计数据总量、读取数据量、处理文件总数,并保存于Session中,以供web客户端通过DWR远程调用 UploadMonitor类的getUploadInfo方法进行轮询(Poll)。

        从本人观点出发,Pierre-Alexandre实现的不足之处:
        1.没有用户取消上传功能;
        2.完全的DWR实现,没有使用Prototype,对于不会使用DWR的开发者来讲有一定的知识局限性,而且由于DWR的个性而造成不便将此实现集成到项目中。



Prototype+Servlet的实现:

image
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}:
java 代码
 
  1. /** 
  2.  * 将bean系列化为UTF-8编码的xml 
  3.  * @param beanObj 
  4.  * @return 
  5.  * @throws IOException 
  6.  */  
  7. public static String serializeBean(Object beanObj) throws IOException{  
  8. …  
  9. }  
  10. /** 
  11.  * 将bean列表序列化为UTF-8编码的xml 
  12.  * @param beanObj 
  13.  * @return 
  14.  * @throws IOException 
  15.  */  
  16. public static String serializeBeanList(Object beanListObj) throws IOException{  
  17. …  
  18. }  



        文件上传状态Bean:使 用FileUploadStatus这个类记录文件上传状态,并将其作为服务器端与web客户端之间通信的媒介物:通过对这个类对象进行XML序列化作为 服务器回应发送给web客户端,web客户端使用JavaScript对其进行反序列化处理获得JavaScript版本的文件上传状态对象。
        {FileUploadStatus的属性}:
java 代码
 
  1. //上传总量  
  2. private long uploadTotalSize=0;  
  3. //读取上传总量  
  4. private long readTotalSize=0;  
  5. //当前上传文件号  
  6. private int currentUploadFileNum=0;  
  7. //成功读取上传文件数  
  8. private int successUploadFileCount=0;  
  9. //状态  
  10. private String status="";  
  11. //处理起始时间  
  12. private long processStartTime=0l;  
  13. //处理终止时间  
  14. private long processEndTime=0l;  
  15. //处理执行时间  
  16. private long processRunningTime=0l;  
  17. //上传文件URL列表  
  18. private List uploadFileUrlList=new ArrayList();  
  19. //取消上传  
  20. private boolean cancel=false;  
  21. //上传base目录  
  22. private String baseDir="";  



        文件上传状态监视工作:使用Common-FileUpload 1.2版本(20070103)。此版本与1.1版的区别在于提供了能够监视文件上传情况的ProcessListener接口,使开发者通过FileUploadBase类对象的setProcessListener方法植入自己的Listener,而且实现这个Listener很简单
        {FileUploadListener主要方法update}:
java 代码
 
  1. /** 
  2.  * 更新状态 
  3.  * @param pBytesRead 读取字节总数 
  4.  * @param pContentLength 数据总长度 
  5.  * @param pItems 当前正在被读取的field号 
  6.  */  
  7. public void update(long pBytesRead, long pContentLength, int pItems){  
  8.         FileUploadStatus fuploadStatus=BackGroundService.takeOutFileUploadStatusBean(this.session);  
  9.         logger.debug("当前正在处理第" + pItems+"个文件");  
  10.         fuploadStatus.setUploadTotalSize(pContentLength);  
  11.         //读取完成  
  12.     if (pContentLength == -1) {  
  13.        logger.debug("读取完成:读取了 " + pBytesRead + " bytes.");  
  14.        fuploadStatus.setStatus("完成对" + pItems+"个文件的读取:读取了 " + pBytesRead + " bytes.");  
  15.        fuploadStatus.setReadTotalSize(pBytesRead);  
  16.        fuploadStatus.setSuccessUploadFileCount(pItems);  
  17.        fuploadStatus.setProcessEndTime(System.currentTimeMillis());  
  18.        fuploadStatus.setProcessRunningTime(fuploadStatus.getProcessEndTime());  
  19.     //读取中  
  20.     } else {  
  21.        logger.debug("读取进行中:已经读取了 " + pBytesRead + " / " + pContentLength+ " bytes.");  
  22.        fuploadStatus.setStatus("当前正在处理第" + pItems+"个文件:已经读取了 " + pBytesRead + " / " + pContentLength+ " bytes.");  
  23.        fuploadStatus.setReadTotalSize(pBytesRead);  
  24.        fuploadStatus.setCurrentUploadFileNum(pItems);  
  25.        fuploadStatus.setProcessRunningTime(System.currentTimeMillis());  
  26.     }  
  27.     BackGroundService.storeFileUploadStatusBean(this.session,fuploadStatus);  
  28. }  


        很清楚,我也把FileUploadStatus这个Bean存取于Session中。

        Servlet实现:BackGroundService 这个Servlet类负责接收Form Post数据、回应状态轮询请求、处理取消文件上传的请求。尽管可以把这些功能相互分离开来(比如构造一个FileUploadManager类),但出 于简单明了、便于阅读之目的,还是将它们放到Servlet中,只是由不同的方法进行分割。
        {BackGroundService中的processFileUpload方法用于处理文件上传请求}:
java 代码
 
  1. /** 
  2.  * 处理文件上传 
  3.  * @param request 
  4.  * @param response 
  5.  * @throws IOException  
  6.  * @throws ServletException  
  7.  */  
  8. private void processFileUpload(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{  
  9.         DiskFileItemFactory factory = new DiskFileItemFactory();  
  10.         //设置内存阀值,超过后写入临时文件  
  11.         factory.setSizeThreshold(10240000);  
  12.         //设置临时文件存储位置  
  13.         factory.setRepository(new File(request.getRealPath("/upload/temp")));  
  14.         ServletFileUpload upload = new ServletFileUpload(factory);  
  15.         //设置单个文件的最大上传size  
  16.         upload.setFileSizeMax(10240000);  
  17.         //设置整个request的最大size  
  18.         upload.setSizeMax(10240000);  
  19.         upload.setProgressListener(new FileUploadListener(request.getSession()));  
  20.         //保存初始化后的FileUploadStatus Bean  
  21.         storeFileUploadStatusBean(request.getSession(),initFileUploadStatusBean(request));  
  22.           
  23.         String forwardURL="";  
  24.         try {  
  25.                 List items = upload.parseRequest(request);  
  26.                 //获得返回url  
  27.                 for(int i=0;i  
  28.                         FileItem item=(FileItem)items.get(i);  
  29.                         if (item.isFormField()){  
  30.                                 logger.debug("form Field["+item.getFieldName()+"]="+item.getString());  
  31.                                 forwardURL=item.getString();  
  32.                                 break;  
  33.                         }  
  34.                 }  
  35.                 //处理文件上传  
  36.                 for(int i=0;i  
  37.                         FileItem item=(FileItem)items.get(i);  
  38.   
  39.                         //取消上传  
  40.                         if (takeOutFileUploadStatusBean(request.getSession()).getCancel()){  
  41.                                 deleteUploadedFile(request);  
  42.                                 break;  
  43.                         }  
  44.                         //保存文件  
  45.                         else if (!item.isFormField() && item.getName().length()>0){  
  46.                                 String fileName=takeOutFileName(item.getName());  
  47.                                 logger.debug("处理文件["+fileName+"]:保存路径为"  
  48.                                                 +request.getRealPath(UPLOAD_DIR)+File.separator+fileName);  
  49.                                 File uploadedFile = new File(request.getRealPath(UPLOAD_DIR)+File.separator+fileName);  
  50.                                 item.write(uploadedFile);  
  51.                                 //更新上传文件列表  
  52.                                 FileUploadStatus fUploadStatus=takeOutFileUploadStatusBean(request.getSession());  
  53.                                 fUploadStatus.getUploadFileUrlList().add(fileName);  
  54.                                 storeFileUploadStatusBean(request.getSession(),fUploadStatus);  
  55.                                 Thread.sleep(500);  
  56.                         }  
  57.                 }  
  58.           
  59.         } catch (FileUploadException e) {  
  60.                 logger.error("上传文件时发生错误:"+e.getMessage());  
  61.                 e.printStackTrace();  
  62.                 uploadExceptionHandle(request,"上传文件时发生错误:"+e.getMessage());  
  63.         } catch (Exception e) {  
  64.                 // TODO Auto-generated catch block  
  65.                 logger.error("保存上传文件时发生错误:"+e.getMessage());  
  66.                 e.printStackTrace();  
  67.                 uploadExceptionHandle(request,"保存上传文件时发生错误:"+e.getMessage());  
  68.         }  
  69.         if (forwardURL.length()==0){  
  70.                 forwardURL=DEFAULT_UPLOAD_FAILURE_URL;  
  71.         }  
  72.         request.getRequestDispatcher(forwardURL).forward(request,response);  
  73. }  


        {BackGroundService中的responseFileUploadStatusPoll方法用于处理对文件上传状态的轮询请求}:
java 代码
 
  1. /** 
  2.  * 回应上传状态查询 
  3.  * @param request 
  4.  * @param response 
  5.  * @throws IOException 
  6.  */  
  7. private void responseFileUploadStatusPoll(HttpServletRequest request,HttpServletResponse response) throws IOException{  
  8.         response.setContentType("text/xml");  
  9.         response.setCharacterEncoding("UTF-8");  
  10.         response.setHeader("Cache-Control""no-cache");  
  11.         logger.debug("发送上传状态回应");  
  12.         response.getWriter().write(XmlUnSerializer.serializeBean(  
  13.                         request.getSession().getAttribute(UPLOAD_STATUS)));  
  14. }  



        {BackGroundService中的processCancelFileUpload方法用于处理取消文件上传的请求}:
java 代码
 
  1. /** 
  2.  * 处理取消文件上传 
  3.  * @param request 
  4.  * @param response 
  5.  * @throws IOException 
  6.  */  
  7. private void processCancelFileUpload(HttpServletRequest request,HttpServletResponse response) throws IOException{  
  8.         FileUploadStatus fUploadStatus=(FileUploadStatus)request.getSession().getAttribute(UPLOAD_STATUS);  
  9.         fUploadStatus.setCancel(true);  
  10.         request.getSession().setAttribute(UPLOAD_STATUS, fUploadStatus);  
  11.         responseFileUploadStatusPoll(request,response);  
  12. }  



Web客户端代码:

image
Prototype给开发者更多的自由选择


web客户端使用了基于Prototype的AjaxWrapper类和XMLDomForAjax类,前者实现了对Ajax.Request功能的封装,而后者实现了对来自服务器的XML Response的反序列化(反序列化为JavaScript对象)。

        为了避免在AjaxWrapper的回调方法中发生this被重写的问题,我使用了ClassUtils类给任何类的每个方法注册一个对类对象自身引用,详见《解开JavaScript生命的达芬奇密码》《Prototype.AjaxRequest的调用堆栈重写问题》
        {ClassUtils类代码}:
js 代码
 
  1. //类工具  
  2. var ClassUtils=Class.create();  
  3. ClassUtils.prototype={  
  4.         _ClassUtilsName:'ClassUtils',  
  5.         initialize:function(){  
  6.         },  
  7.         /** 
  8.          * 给类的每个方法注册一个对类对象的自我引用 
  9.          * @param reference 对类对象的引用 
  10.          */  
  11.         registerFuncSelfLink:function(reference){  
  12.                 for (var n in reference) {  
  13.                 var item = reference[n];                          
  14.                 if (item instanceof Function)   
  15.                                 item.$ = reference;  
  16.             }  
  17.         }  
  18. }  



        {将XML反序列化为JavaScript对象的XMLDomForAjax类代码}:
js 代码
 
  1. var XMLDomForAjax=Class.create();  
  2. XMLDomForAjax.prototype={  
  3.         isDebug:false,  
  4.         //dom节点类型常量  
  5.         ELEMENT_NODE:1,  
  6.         ATTRIBUTE_NODE:2,  
  7.     TEXT_NODE:3,  
  8.     CDATA_SECTION_NODE:4,  
  9.     ENTITY_REFERENCE_NODE:5,  
  10.     ENTITY_NODE:6,  
  11.     PROCESSING_INSTRUCTION_NODE:7,  
  12.     COMMENT_NODE:8,  
  13.     DOCUMENT_NODE:9,  
  14.     DOCUMENT_TYPE_NODE:10,  
  15.     DOCUMENT_FRAGMENT_NODE:11,  
  16.     NOTATION_NODE:12,  
  17.       
  18.         initialize:function(isDebug){  
  19.                 new ClassUtils().registerFuncSelfLink(this);  
  20.                 this.isDebug=isDebug;  
  21.         },  
  22.         /** 
  23.          * 建立跨平台的dom解析器 
  24.          * @param xml xml字符串 
  25.          * @return dom解析器 
  26.          */  
  27.         createDomParser:function(xml){  
  28.                 // code for IE  
  29.                 if (window.ActiveXObject){  
  30.                   var doc=new ActiveXObject("Microsoft.XMLDOM");  
  31.                   doc.async="false";  
  32.                   doc.loadXML(xml);  
  33.                 }  
  34.                 // code for Mozilla, Firefox, Opera, etc.  
  35.                 else{  
  36.                   var parser=new DOMParser();  
  37.                   var doc=parser.parseFromString(xml,"text/xml");  
  38.                 }  
  39.                 return doc;  
  40.         },  
  41.         /** 
  42.          * 反向序列化xml到javascript Bean 
  43.          * @param xml xml字符串 
  44.          * @return javascript Bean 
  45.          */  
  46.         deserializedBeanFromXML:function (xml){  
  47.                 var funcHolder=arguments.callee.$;  
  48.                 var doc=funcHolder.createDomParser(xml);  
  49.                 // documentElement总表示文档的root  
  50.                 var objDomTree=doc.documentElement;  
  51.                 var obj=new Object();  
  52.             for (var i=0; i  
  53.                     //获得节点  
  54.                     var node=objDomTree.childNodes[i];  
  55.                     //取出其中的field元素进行处理  
  56.                 if ((node.nodeType==funcHolder.ELEMENT_NODE) && (node.tagName == 'field')) {  
  57.                         var nodeText=funcHolder.getNodeText(node);  
  58.                         if (funcHolder.isDebug){  
  59.                             alert(node.getAttribute('name')+' type:'+node.getAttribute('type')+' text:'+nodeText);  
  60.                         }  
  61.                     var objFieldValue=null;  
  62.                     //如果为列表  
  63.                     if (node.getAttribute('type')=='java.util.List'){  
  64.                             if (objFieldValue && typeof(objFieldValue)=='Array'){  
  65.                                     if (nodeText.length>0){  
  66.                                                         objFieldValue[objFieldValue.length]=nodeText;  
  67.                                                 }  
  68.                                         }  
  69.                                         else{  
  70.                                                 objFieldValue=new Array();  
  71.                                         }  
  72.                                 }  
  73.                                 else if (node.getAttribute('type')=='long'   
  74.                                         || node.getAttribute('type')=='java.lang.Long'  
  75.                                         || node.getAttribute('type')=='int'  
  76.                                         || node.getAttribute('type')=='java.lang.Integer'){  
  77.                                           
  78.                                         objFieldValue=parseInt(nodeText);  
  79.                                 }  
  80.                                 else if (node.getAttribute('type')=='double'   
  81.                                         || node.getAttribute('type')=='float'  
  82.                                         || node.getAttribute('type')=='java.lang.Double'  
  83.                                         || node.getAttribute('type')=='java.lang.Float'){  
  84.                                           
  85.                                         objFieldValue=parseFloat(nodeText);  
  86.                                 }  
  87.                                 else if (node.getAttribute('type')=='java.lang.String'){  
  88.                                         objFieldValue=nodeText;  
  89.                                 }  
  90.                                 else{  
  91.                                         objFieldValue=nodeText;  
  92.                                 }  
  93.                                 //赋值给对象  
  94.                                 obj[node.getAttribute('name')]=objFieldValue;  
  95.                                 if (funcHolder.isDebug){  
  96.                                         alert(eval('obj.'+node.getAttribute('name')));  </sp>
   发表时间:2007-01-12  
根据大家的反馈,已经完成了AJAX FileUpload的u1版,进行了以下fix:

1。支持中文文件下载
2。增加了单个文件的删除功能
3。增加了AJAX动画显示


大家可以从本文的源代码处或者这里下载
0 请登录后投票
   发表时间: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的依赖。
0 请登录后投票
   发表时间:2007-01-21  
我也写了一个类似的控件,不过有个问题,后台只能取到整个表单的大小,没法取到文件的大小,这样在做文件上传进度的时候有点问题,另外http的文件上传好像太慢了
0 请登录后投票
   发表时间:2007-01-22  
布u2版本 有错阿, 怎么提示“网络通讯失败” “获得回应失败”
0 请登录后投票
   发表时间:2007-01-23  
引用
我也写了一个类似的控件,不过有个问题,后台只能取到整个表单的大小,没法取到文件的大小,这样在做文件上传进度的时候有点问题,另外http的文件上传好像太慢了


我在后台使用servlet,判断request header中的content-length,把它作为判断上传文件大小的依据。如果要进一步分析每个文件的大小,本人觉得没有必要,而且这种分析只能随着对request流的解析同时进行。
0 请登录后投票
   发表时间:2007-01-23  
引用
布u2版本 有错阿, 怎么提示“网络通讯失败” “获得回应失败”


通讯失败?请把log内容贴上吧。我这里测试正常啊。
0 请登录后投票
   发表时间: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]
0 请登录后投票
   发表时间:2007-01-25  
在包里面有一个bjvip_quickaction.jar   不知道这个包是什么啊?能提供代码吗?
0 请登录后投票
   发表时间:2007-01-27  
报“通讯出错”的朋友加入commons-collections-3.2.jar就可以了

另外发现上传2个或3个文件成功后,result页面只列出最后一个文件,这是不是bug?
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics