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

tastelive

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
   2.2.2. fileUpload.html
返回
　　 fileUpload.html是文件上传界面。 源代码如下：
   
   
   
   
   
   
   文件上传
  
   
   
   
    测试说明:   最大上传量:100M，单个文件最大长度:100M
   
   
   
   
   
   
   
   
      
   
   
     
      
      
      
     
     
      
     
   
  
  
  
   
   Element.hide('progressBar');
   Event.observe('fileUploadForm','submit',startProgress,false);
   Event.observe('cancelUploadButton','click',cancelProgress,false);
  
   //刷新上传状态
   function refreshUploadStatus(){
    var ajaxW = new AjaxWrapper(false);
    ajaxW.putRequest(
     './BackGroundService.action',
     'uploadStatus=',
     function(responseText){
       eval("uploadInfo = " + responseText);
       var progressPercent = Math.ceil(
        (uploadInfo.ReadTotalSize) / uploadInfo.UploadTotalSize * 100);
   
       $('progressBarText').innerHTML = ' 上传处理进度: '+progressPercent+'% ['+        (uploadInfo.ReadTotalSize)+'/'+uploadInfo.UploadTotalSize + ' bytes]'+
        ' 正在处理第'+uploadInfo.CurrentUploadFileNum+'个文件'+
        ' 耗时: '+(uploadInfo.ProcessRunningTime-uploadInfo.ProcessStartTime)+' ms';
       $('progressStatusText').innerHTML=' 反馈状态: '+uploadInfo.Status;
       $('totalProgressBarBoxContent').style.width = parseInt(progressPercent * 3.5) + 'px';
     }
    );
   }
   //上传处理
   function startProgress(){
    Element.show('progressBar');
    $('progressBarText').innerHTML = ' 上传处理进度: 0%';
    $('progressStatusText').innerHTML=' 反馈状态:';
    $('uploadButton').disabled = true;
    var periodicalExe=new PeriodicalExecuter(refreshUploadStatus,0.5);
    return true;
   }
   //取消上传处理
   function cancelProgress(){
    $('cancelUploadButton').disabled = true;
    var ajaxW = new AjaxWrapper(false);
    ajaxW.putRequest(
     './BackGroundService.action',
     'cancelUpload=true',
     //因为form的提交，这可能不会执行
     function(responseText){
      eval("uploadInfo = " + responseText);
      $('progressStatusText').innerHTML=' 反馈状态: '+uploadInfo.status;
      if (msgInfo.cancel=='true'){
       alert('删除成功!');
       window.location.reload();
      };
     }
    );
   }
   
   
     
   2.2.3. result.jsp
返回
　　 result.jsp是文件上传结果显示界面。 源代码如下：







文件上传结果



   上传文件列表:

    ">
   =0){
   %>
    错误信息:
   
    由于用户取消上传，所以已经上传的文件均被删除
   


   
   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;
}  
               
               
               

本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u1/49560/showart_395776.html