AJAX实现基于WEB的文件上传的进度控制 - 代码实现(客户端)

2.2. 客户端代码

　　 客户端我们采用Prototype框架。

   2.2.1. AjaxWrapper.js

返回

　　 AjaxWrapper.js对Prototype进行了封装。 源代码如下：

 
//类工具
 var ClassUtils=Class.create();
 ClassUtils.prototype={
   _ClassUtilsName:'ClassUtils',
   initialize:function(){
   },
   /**
    * 给类的每个方法注册一个对类对象的自我引用
    * @param reference 对类对象的引用
    */
   registerFuncSelfLink:function(reference){
    for (var n in reference) {
     var item = reference[n];                        
     if (item instanceof Function) 
      item.$ = reference;
    }
   }
 }
 //Ajax操作封装类：
 //由于调用AjaxRequest类进行XMLHTTPRequest操作时，this引用（指向当前的对象）会出现了call stack问题，从而指向当前的对象。
 //所以，对putRequest、callBackHandler、以及callback方法都要使用arguments.callee.$来获得正确的类对象引用
 var AjaxWrapper=Class.create();
 AjaxWrapper.prototype={
   debug_flag:false,
   xml_source:'',
   /**
    * 初始化
    * @param isDebug 是否显示调试信息
    */
   initialize:function(isDebug){
    new ClassUtils().registerFuncSelfLink(this);
    this.debug_flag=isDebug;
   
   },
   /**
    * 以get的方式向server发送request
    * @param url
    * @param params
    * @param callBackFunction 发送成功后回调的函数或者函数名
    */
   putRequest:function(url,params,callBackFunction){
    var funcHolder=arguments.callee.$;
    var xmlHttp = new Ajax.Request(url,
     {
      method: 'get', 
      parameters: params, 
      requestHeaders:['my-header-encoding','utf-8'],
      onFailure: function(){
       alert('对不起，网络通讯失败，请重新刷新！');
      },
      onSuccess: function(transport){
      },
      onComplete: function(transport){
       funcHolder.callBackHandler.apply(funcHolder,[transport,callBackFunction]);
      }
     });
   },
   /**
    * 以post的方式向server发送xml请求
    * @param url
    * @param postDataBody
    * @param callBackFunction 发送成功后回调的函数或者函数名
    */
   pushRequest:function(url,postDataBody,callBackFunction){
    var funcHolder=arguments.callee.$;
    var options={
      method: 'post', 
      parameters:'',
      requestHeaders:['my-header-encoding','utf-8'],
      postBody: postDataBody,
      onFailure: function(transport){
       alert('对不起，网络通讯失败，请重新发送！');
      },
      onComplete: function(transport){
       funcHolder.callBackHandler.apply(funcHolder,[transport,callBackFunction]);
      }
     };
    var xmlHttp = new Ajax.Request(url,options);
   },
   /**
    * 远程调用的回调处理
    * @param transport xmlhttp的transport
    * @param callBackFunction 回调时call的方法，可以是函数也可以是函数名
    */
   callBackHandler:function(transport,callBackFunction){
    var funcHolder=arguments.callee.$;
    if(transport.status!=200){
     alert("获得回应失败,请求状态:"+transport.status);
    }
    else{
     funcHolder.xml_source=transport.responseText;
     if (funcHolder.debug_flag)
      alert('call callback function');
     if (typeof(callBackFunction)=='function'){
      if (funcHolder.debug_flag){
       alert('invoke callbackFunc');
      }
      callBackFunction(transport.responseText);
     }
     else{
      if (funcHolder.debug_flag){
       alert('evalFunc callbackFunc');
      }
      new execute().evalFunc(callBackFunction,transport.responseText);
     }
     if (funcHolder.debug_flag)
      alert('end callback function');
    }
   },
   //显示xml信息
   showXMLResponse:function(){
    var funcHolder=arguments.callee.$;
    alert(funcHolder.xml_source);
   }
 }
 
 var XMLDomForAjax=Class.create();
 XMLDomForAjax.prototype={
   isDebug:false,
   //dom节点类型常量
   ELEMENT_NODE:1,
   ATTRIBUTE_NODE:2,
   TEXT_NODE:3,
   CDATA_SECTION_NODE:4,
   ENTITY_REFERENCE_NODE:5,
   ENTITY_NODE:6,
   PROCESSING_INSTRUCTION_NODE:7,
   COMMENT_NODE:8,
   DOCUMENT_NODE:9,
   DOCUMENT_TYPE_NODE:10,
   DOCUMENT_FRAGMENT_NODE:11,
   NOTATION_NODE:12,
  
   initialize:function(isDebug){
    new ClassUtils().registerFuncSelfLink(this);
    this.isDebug=isDebug;
   },
   /**
    * 建立跨平台的dom解析器
    * @param xml xml字符串
    * @return dom解析器
    */
   createDomParser:function(xml){
    // code for IE
    if (window.ActiveXObject){
      var doc=new ActiveXObject("Microsoft.XMLDOM");
      doc.async="false";
      doc.loadXML(xml);
    }
    // code for Mozilla, Firefox, Opera, etc.
    else{
      var parser=new DOMParser();
      var doc=parser.parseFromString(xml,"text/xml");
    }
    return doc;
   },
   /**
    * 反向序列化xml到javascript Bean
    * @param xml xml字符串
    * @return javascript Bean
    */
   deserializedBeanFromXML:function (xml){
    var funcHolder=arguments.callee.$;
    var doc=funcHolder.createDomParser(xml);
    // documentElement总表示文档的root
    var objDomTree=doc.documentElement;
    var obj=new Object();
    for (var i=0; i0){
         objFieldValue[objFieldValue.length]=nodeText;
        }
       }
       else{
        objFieldValue=new Array();
       }
      }
      else if (node.getAttribute('type')=='long' 
       || node.getAttribute('type')=='java.lang.Long'
       || node.getAttribute('type')=='int'
       || node.getAttribute('type')=='java.lang.Integer'){      
       objFieldValue=parseInt(nodeText);
      }
      else if (node.getAttribute('type')=='double' 
       || node.getAttribute('type')=='float'
       || node.getAttribute('type')=='java.lang.Double'
       || node.getAttribute('type')=='java.lang.Float'){
      
       objFieldValue=parseFloat(nodeText);
      }
      else if (node.getAttribute('type')=='java.lang.String'){
       objFieldValue=nodeText;
      }
      else{
       objFieldValue=nodeText;
      }
      //赋值给对象
      obj[node.getAttribute('name')]=objFieldValue;
      if (funcHolder.isDebug){
       alert(eval('obj.'+node.getAttribute('name')));
      }
     }
     else if (node.nodeType == funcHolder.TEXT_NODE){
      if (funcHolder.isDebug){
       //alert('TEXT_NODE');
      }
     
     }
     else if (node.nodeType == funcHolder.CDATA_SECTION_NODE){
      if (funcHolder.isDebug){
       //alert('CDATA_SECTION_NODE');
      }
     }
    }
    return obj;
   },
   /**
    * 获得dom节点的text
    */
   getNodeText:function (node) {
    var funcHolder=arguments.callee.$;
    // is this a text or CDATA node?
    if (node.nodeType == funcHolder.TEXT_NODE || node.nodeType == funcHolder.CDATA_SECTION_NODE) {
     return node.data;
    }
    var i;
    var returnValue = [];
    for (i = 0; i < node.childNodes.length; i++) {
     //采用递归算法
     returnValue.push(funcHolder.getNodeText(node.childNodes[i]));
    }
    return returnValue.join('');
   }
 }
 
 //委托者类
 var Dispatcher=Class.create();
 Dispatcher.prototype={
   name:'Dispatcher',
   //对class中的每个function都赋值一个值为this的$属性
   initialize:function(){
    new ClassUtils().registerFuncSelfLink(this);
   },
   /**
    * 委托调用
    * @param caller 调用者，func的拥有者
    * @param func 如果是function对象，则使用Dispatcher对象自己的name作为参数；否则直接调用func
    */
   dispatch:function(caller,func){
    if (func instanceof Function){
     var funcArguments=new Array();
     funcArguments[0]=arguments.callee.$.name;
     func.apply(caller,funcArguments);
    }
    else{
     eval(func);
    }
   }
 }
 //祈祷者类
 var Invoker=Class.create();
 Invoker.prototype={
   name:'Invoker',
   initialize:function(){
   },
   invoke:function(showMsg){
    alert(showMsg+"——this.name="+this.name);
   }
 }  

   2.2.2. fileUpload.html

返回

　　 fileUpload.html是文件上传界面。 源代码如下：

   
   
   
   
   
   
   
  
   
   
   

    
测试说明:   最大上传量:100M，单个文件最大长度:100M

    

   
    
     enctype="multipart/form-data" method="post">
    

    

    

    
    

    
   
    

    

     

      

       

      

     

     

      

     
   

  
  
  
   
   

     

   2.2.3. result.jsp

返回

　　 result.jsp是文件上传结果显示界面。 源代码如下：

 
 <%@ page language="java" contentType="text/html; charset=GBK"   pageEncoding="GBK"%>
 <%@ page import="liuzuochen.sample.upload.*" %>
 
 
 
 
 
 
 
 

   
上传文件列表:

 <%
  
   FileUploadStatus fUploadStatus=BackGroundService.getStatusBean(request);
 
   for(int i=0;i    String fileName=(String)fUploadStatus.getUploadFileUrlList().get(i);
    String url=fUploadStatus.getBaseDir()+"/"+fileName;
   %>
    
<%=fileName%>

   <%
   }
   if (fUploadStatus.getStatus().indexOf("错误")>=0){
   %>
    
错误信息:<%=fUploadStatus.getStatus() %>

   <% 
   }
   else if (fUploadStatus.getCancel()){
   %>
    
由于用户取消上传，所以已经上传的文件均被删除

   <%
   }
   BeanControler.getInstance().removeUploadStatus(request.getRemoteAddr());
 
 %>
 

 
   

   2.2.4. fileUpload.css

返回

　　 fileUpload.css是样式文件。 源代码如下：

 
 body {
   color:#000;
   background-color:white;
   font:15px Georgia, "Lucida Grande", Arial, sans-serif; 
   letter-spacing:0.01em;
   margin:15px;
 }
 #controlPanel,#resultPanel{
   width:700px;
   margin:20px auto;
   padding:25px;
   border:3px solid gray;
   -moz-border-radius:10px;
   background:#f8f8f8;
 }
 #errorArea{
   width:400px;
   margin:20px auto;
   padding:25px;
   border:3px solid gray;
   -moz-border-radius:10px;
   background:red;
 }
 #normalMessageArea{
   width:400px;
   margin:20px auto;
   padding:25px;
   border:3px solid gray;
   -moz-border-radius:10px;
   background:yellow;
 }
 #progressBar { padding-top: 5px; }
 #totalProgressBarBox { 
   width: 350px; 
   height: 20px; 
   border: 1px inset; 
   background: #eee;
 }
 #totalProgressBarBoxContent { 
   width: 0; 
   height: 20px; 
   border-right: 1px solid #444; 
   background: #9ACB34; 
 }