标题:原JS/封装Ajax图片上传【加载进度条方法】 出处:刘新修 时间:Wed, 28 Oct 2015 17:24:32 +0000 作者:刘新修 地址:http://liuxinxiu.com:80/Ajax_Loading/ 内容: JavaScript代码 /**** 原生JS封装Ajax图片上传【加载进度条方法】 ****/ ajax({ //url:'/xdo/marketActivity/task/uploadImage.do', url:'/xdo/marketActivity/common/uploadImage.do', type:'POST', data:{guid:_guid,plat:_plat,file:upload.fileSrc,isMain:upload.isMain,isFinish:upload.finish}, dataType:'json', timeout:9000, //xhr:xhrProvider, beforeSend:function(){ var bodyDom=document.getElementsByTagName("body")[0]; var loading=document.getElementById('loading'); loading.setAttribute("usable","true"); loading.style.display="block"; loading.innerHTML='loading...'; }, uploading:function(data){ console.log(data); }, success:function(data){ //console.log(data); }, fail:function(data){ //console.log(data); } }); /**** jquery/Ajax图片上传【加载进度条方法】 ****/ function onprogress(evt){ // display uploading progress infomation... alert(evt.loaded) console.log((evt.loaded/evt.total)*100); }; var xhrProvider=function(){ var xhr=$.ajaxSettings.xhr(); //var xhr=new XMLHttpRequest(); //var xhr=ajaxY.xhr; //alert(xhr.upload) if(onprogress&&xhr.upload){ xhr.upload.addEventListener('progress', onprogress, false); } return xhr; }; $.ajax({ //url:'/xdo/marketActivity/task/uploadImage.do', url:'/xdo/marketActivity/common/uploadImage.do', type:'POST', data:{guid:_guid,plat:_plat,file:upload.fileSrc,isMain:upload.isMain,isFinish:upload.finish}, dataType:'json', timeout:9000, xhr:xhrProvider, success:function(data){ //console.log(result); }, error:function(data){ //console.log(data); } }); Generated by Bo-blog 2.1.1 Release