原JS/封装Ajax图片上传【加载进度条方法】

大 | 中 | 小
[不指定 2015/10/28 17:24 | by 刘新修 ]
JavaScript代码
  1. /**** 原生JS封装Ajax图片上传【加载进度条方法】 ****/  
  2. ajax({   
  3.      //url:'/xdo/marketActivity/task/uploadImage.do',  
  4.      url:'/xdo/marketActivity/common/uploadImage.do',  
  5.      type:'POST',  
  6.      data:{guid:_guid,plat:_plat,file:upload.fileSrc,isMain:upload.isMain,isFinish:upload.finish},  
  7.      dataType:'json',  
  8.      timeout:9000,  
  9.      //xhr:xhrProvider,  
  10.      beforeSend:function(){  
  11.         var bodyDom=document.getElementsByTagName("body")[0];  
  12.         var loading=document.getElementById('loading');  
  13.         loading.setAttribute("usable","true");  
  14.         loading.style.display="block";  
  15.         loading.innerHTML='loading...';  
  16.      },  
  17.      uploading:function(data){  
  18.         console.log(data);  
  19.      },  
  20.      success:function(data){  
  21.         //console.log(data);  
  22.      },  
  23.      fail:function(data){  
  24.         //console.log(data);  
  25.      }  
  26. });  
  27. /**** jquery/Ajax图片上传【加载进度条方法】 ****/  
  28. function onprogress(evt){  
  29.     // display uploading progress infomation...  
  30.     alert(evt.loaded)  
  31.     console.log((evt.loaded/evt.total)*100);  
  32. };  
  33. var xhrProvider=function(){  
  34.     var xhr=$.ajaxSettings.xhr();  
  35.     //var xhr=new XMLHttpRequest();  
  36.     //var xhr=ajaxY.xhr;  
  37.     //alert(xhr.upload)  
  38.     if(onprogress&&xhr.upload){  
  39.         xhr.upload.addEventListener('progress', onprogress, false);  
  40.     }  
  41.     return xhr;  
  42. };  
  43. $.ajax({   
  44.      //url:'/xdo/marketActivity/task/uploadImage.do',  
  45.      url:'/xdo/marketActivity/common/uploadImage.do',  
  46.      type:'POST',  
  47.      data:{guid:_guid,plat:_plat,file:upload.fileSrc,isMain:upload.isMain,isFinish:upload.finish},  
  48.      dataType:'json',  
  49.      timeout:9000,  
  50.      xhr:xhrProvider,  
  51.      success:function(data){  
  52.         //console.log(result);        
  53.      },  
  54.      error:function(data){  
  55.         //console.log(data);  
  56.      }  
  57. });  
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4287)