ajax文件上传

ajax有一个进度事件progress可以用于监听文件上传的进度

 

 xhr.onprogress=function(event)
      {


        if( event.lengthComputable)
        {
          
          var percent =   parseInt(event.position/event. totalSize * 100) + "%";
          $("#progress_percent").text(percent);
          $("#progress_percent").width(percent);
        } 
      }

 

进度事件onprogress会接收一个event对象，该对象含有三个属性，表示进度信息。
属性lengthComputable是一个表示进度信息是否可用的布尔值。当lengthComputable为true时进度信息可用。
position表示已经接收的字节数
totalSize 表示根据content-length响应头部确定的预期字节数
通过这三个属性可以实时监听上传的进度。
但是在项目中投入使用时，却出现了问题。
问题1：由于是通过表单提交，页面会马上进行跳转，（页面跳转至当前菜单列表页面）当上传文件大的时候，页面跳转导致上传中断，上传失败。
问题2：无法实施监控进度，进度函数只被调用一次
问题3;position与totalSize 是undefined

下面是各个问题的解决方法
问题1：
表单的提交后是默认跳转，为使其不进行跳转，需要取消form的默认提交方式
if(event.preventDefault) event.preventDefault();
else event.returnValue = false;   
DOM有一个event对象，该对象有一个preventDefault() 方法，用于取消事件的默认动作。
语法
event.preventDefault()
说明
该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。
问题2：
xhr.οnprοgress=function(event)
改为 xhr.upload.οnprοgress=function(event)
问题3：totalSize  改为 total
position  改为  loaded








下面附上完整代码

 

 

$(".display").find("#send_one_meau_form").on('click', '#submit_one_meau', function(){ //表单的提交按钮的点击事件
      var formData = new FormData($( "#send_one_meau_form" )[0]);  
      var  ourl='http://localhost:8080/webapp/AddOrUpdata' ;
      var xhr = new XMLHttpRequest();
      xhr.onload=function(event)
      {
        if  ( ( xhr.status >= 200 && xhr.status < 300) || xhr.status = = 304)   //上传成功
        {
          $("#progress_div").css("display","none");
          $("#success_send").text("上传成功！");
        }
        else    
        {
          $("#progress_div").css("display","none");
          $("#success_send").text("上传失败！");
        }
      };
      xhr.upload.onprogress=function(event)
      {


        if( event.lengthComputable)
        {
          
          var percent =   parseInt(event.position/event. totalSize * 100) + "%";
          $("#progress_percent").text(percent);
          $("#progress_percent").width(percent);
          document.getElementById("progress_percent").style.width=percent;
        } 
      }
      xhr.open("post", ourl ,true);
      $("#progress_div").css("display","block");
      xhr.send(formData);   


  });