sunfruit[请访问http://www.fruitres.cn]

--我相信JAVA能走得更远 QQ:316228067

[原创]通过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("文件上传成功");
        }
      }
    }
  }
 
基本流程就是这样了,至于文字表现上传过程还是进度条表现,就看自己了

posted on 2006-08-10 11:11 sunfruit 阅读(2437) 评论(5)  编辑  收藏 所属分类: Ajax

评论

# re: [原创]通过AJAX监控文件上传进度 2006-08-11 22:31 endisoft

这个也能监控吗?  回复  更多评论   

# re: [原创]通过AJAX监控文件上传进度 2006-08-17 13:29 sunfruit

欧,不好意思,上次由于网络断了没有写完,现在已经写完了  回复  更多评论   

# re: [原创]通过AJAX监控文件上传进度 2006-12-12 14:08 Andycation

这根本不是进度!只不过一个状态而已 就失败和成功  回复  更多评论   

# re: [原创]通过AJAX监控文件上传进度 2006-12-13 12:42 sunfruit[匿名]

进度按照这个思路不就可以作了么,总文件大小和已经上传的大小的比例拉伸一个图片就OK了  回复  更多评论   

# re: [原创]通过AJAX监控文件上传进度 2010-04-29 15:34 lingtianlan

核心部分没写出来  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: