通过AJAX监控文件上传进度

    --sunfruit

   很多时候需要上传附件到服务器,一般采用在页面放置<input type="file" name="upload" value=""> 的方式让用户选择要上传的文件进行上传,使用的是HTTP协议,这样的方式很方便开发也简单,不过如果上传的附件比较大的时候,会出现IE响应很慢的情况,如果用户急性子,多点几下上传的按钮,那么就会导致IE不响应的情况,这个时候如果在文件上传得过程中,给用户一个动态的提示甚至是一个上传的进度条,效果就会好多了,这样就会用到Ajax技术了,让Ajax以一个固定的间隔时间检查上传情况然后在页面以文字或是图片的方式体现出来就行了。

   在使用Ajax进行附件上传进度查询的时候也想过,直接使用Ajax进行附件上传,在实现过程中发现问题比较多,所以就使用了变通的方式:使用标准的附件上传方式,结合Ajax进行上传的进度检查

   主要的代码如下:

   Ajax的封装

/** 
  * 创建 XMLHttpRequest 对象 
  */ 
  function getXMLHttpRequest() 
  { 
    var http_request; 
    if (window.XMLHttpRequest) { 
      //非IE浏览器框架创建 XMLHttpRequest 对象 
      http_request = new XMLHttpRequest(); 
      if(http_request.overrideMimeType) 
      { 
        http_request.overrideMimeType('text/xml'); 
      } 
    }else if (window.ActiveXObject){ 
      // 创建 XMLHttpRequest 对象 
      try { 
        http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
      } catch (e1) { 
        try { 
          http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
        } catch (e2) { 
          // 不能创建 XMLHttpRequest 对象 
        } 
      } 
    } 
    return http_request; 
  } 
/** 
   * Get请求 
   */ 
  function sendGetDictate(http_request,url) 
  { 
    req.open("GET", url, true); 
    http_request.send(null); 
  }

以上是Ajax的的基础部分,下面说文件上传部分的检查部分,文件上传本身的流程不变,只是在提交上传以后,需要执行setTimeout(checkupload,500); 这样的方法 checkupload 方法要自己编写,例如

function checkupload() 
  { 
    req=getXMLHttpRequest(); 
    req.onreadystatechange = setActiveContent; 
    sendGetDictate(req,"/manager/servlet/imageservlet?tag=ajaxuploadfilecheck&WARE_ID=609187669&nocache="+Math.random(),"name=111"); 
  }

然后需要编写setActiveContent方法,例如

var count=0; //防止无限循环,并且在页面提交上传得时候设置为0

function setActiveContent() 
  { 
    if (req.readyState == 4) { 
      if (req.status == 200) { 
        var rettext=req.responseText; //这里是servlet返回的内容,检查上传得状态,可以在javabean或是servlet里面设置全局的静态变量来表明上传状态 
        if(rettext=="-1") 
        { 
          //停止循环 
          alert("服务器更新错误"); 
        } 
        else if(rettext=="0") 
        { 
          //继续循环检查 
          if(count<6) 
          { 
            setTimeout("checkupload()",500); 
            count++; 
          } 
          else 
          { 
            alert("上传失败"); 
          } 
        } 
        else if(rettext=="1") 
        { 
          alert("文件上传成功"); 
        } 
      } 
    } 
  }

 

基本流程就是这样了,至于文字表现上传过程还是进度条表现,就看自己了