`

掌控上传进度的AJAX Upload

阅读更多

掌控上传进度的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>
分享到:
评论

相关推荐

    掌控上传进度的Ajax Upload

    原文地址 http://www.telio.be/blog/2006/01/06/ajax-upload-progress-monitor-for-commons-fileupload-example/ 博文链接:https://congjl2002.iteye.com/blog/209925

    ajaxupload.js

    AjaxUpload是一种在Web应用中实现异步文件上传的技术,它基于JavaScript的Ajax(Asynchronous JavaScript and XML)技术,允许用户在不刷新整个页面的情况下上传文件,提高了用户体验。`ajaxupload.js`是实现这一...

    AjaxUpload.rar 文件上传

    6. 处理反馈:一旦接收到服务器的响应,AjaxUpload会根据反馈信息更新页面,如显示上传进度、成功或失败的消息等。 **二、AjaxUpload的关键技术** 1. XMLHttpRequest:AjaxUpload依赖于XMLHttpRequest对象,用于...

    ajaxupload.js上传图片

    2. **事件处理**:在上传过程中,AjaxUpload.js 提供了一系列的事件,如“选择文件”(onSelect)、“开始上传”(onStart)、“上传进度”(onProgress)、“上传成功”(onSuccess)和“上传失败”(onError)。...

    jquery Ajaxupload应用

    AjaxUpload是一款非常实用的JavaScript插件,它允许用户在无需刷新页面的情况下上传文件,极大地提升了用户体验。在这个详细的知识点解析中,我们将深入理解AjaxUpload的工作原理,了解如何集成到项目中,并掌握其...

    ajaxupload无刷新文件上传,支持多文件上传,使用很方便哦

    ajaxupload.js 是一款使用jquery上传文件的js插件,对于简单的文件上传,足够可以应付, 你可以根据自身需要对前后端代码进行补充,也可以将一些功能独立出来,比如文件类型、单个文件或者多文件上传功能。总的来说...

    ajaxupload华丽的图片上传

    利用ajaxupload组件实现的图片上传 1、在部署该工程时,要在tomcat/webapps/对应的工程下建upload/good目录; 2、在该工程中,点击一次上传图片按钮,就执行一次后台操作,然后将图片的路径保存在一个input的隐藏域...

    Jquery AjaxUpload实现文件上传实例 PHP版

    AjaxUpload是jQuery的一个插件,它提供了一种方便的异步文件上传方式,无需刷新页面即可完成文件上传,提高了用户体验。在这个“Jquery AjaxUpload实现文件上传实例 PHP版”中,我们将探讨如何使用jQuery的Ajax...

    Base64和AjaxUpload上传文件代码实例

    Base64和AjaxUpload上传文件代码实例 Base64和AjaxUpload上传文件代码实例是两种常用的文件上传方式,它们都可以实现文件上传到服务器端,但它们之间有着明显的区别。 Base64上传文件是一种基于文本编码的上传方式...

    ajaxUpload.

    标题"ajaxUpload."和描述"ajaxUpload.ajaxUpload.ajaxUpload."暗示我们将深入探讨这个话题。 ### 一、Ajax Upload原理 Ajax Upload的核心是利用JavaScript的异步特性,通过XMLHttpRequest对象与服务器进行通信。它...

    ajax无刷新上传ajax upload

    在Ajax Upload过程中,需处理一系列事件,如文件选择事件、上传开始事件、上传进度事件和上传完成事件。这些事件可以用来显示上传进度,提供反馈,或者处理错误。 6. **安全考虑**: 文件上传时要考虑安全性问题...

    Ajaxupload

    当用户选择文件后,而不是立即提交整个表单,AjaxUpload会触发一个后台上传过程,这个过程通常伴随着进度指示和错误处理机制。在服务器端,接收并处理文件后,会将结果通过JSON、XML或其他格式响应给客户端,然后...

    ajaxUpload示例

    AjaxUpload是基于Ajax技术的一种文件上传方式,它允许用户在不刷新整个页面的情况下上传文件,同时可以显示上传进度和错误提示,使得文件上传操作更加友好和高效。 **一、AjaxUpload工作原理** AjaxUpload的基本...

    使用ajaxupload.js/ajaxfileupload.js实现文件上传

    在使用`ajaxupload.js`时,你需要配置相关的参数,如URL(文件上传的目标地址)、数据类型(通常为'binary'或'json')以及回调函数,这些回调函数可以处理上传开始、进度更新和成功/失败的情况。 而`ajaxfileupload...

    jquery 插件ajaxupload 的简单应用

    - **多文件上传**:虽然AjaxUpload默认支持单文件上传,但可以通过修改插件代码或使用其他库(如Dropzone.js)实现多文件上传。 - **文件类型限制**:在beforeSubmit函数中,可以通过检查文件扩展名来限制上传的文件...

    ajax_upload_ajaxupload_walkazj_源码

    7. **ajax_uploader**:这可能是一个JavaScript文件,包含前端的Ajax上传实现,负责与服务器(ajaxupload.php)进行通信,提供用户界面反馈,如上传进度、错误提示等。 综合以上分析,这个源码包为PHP网站提供了一...

    ajaxUpload(一个上传插件)

    **AjaxUpload:强大的异步文件上传插件** AjaxUpload是一款基于JavaScript和Ajax技术的文件上传插件,它允许用户在不刷新页面的情况下实现文件的上传,极大地提升了用户体验。这款插件以其简洁的API和高度的可定制...

Global site tag (gtag.js) - Google Analytics