发一个支持iframe的无刷上传文件的ajax类库

在原来的ajax类库基础上添加了post方法,直接提交表单,而不需要手动收集要提交的键和值。并在此基础上判断enctype是否为"multipart/form-data"类型,如果是则表单提交到隐藏的iframe中实现无刷新上传文件。
不过需要注意的是网站使用的编码为utf-8
+展开
-JavaScript
var Showbo={version:'1.0',author:'showbo',intro:'通用',homepage:'//'};
//是否为ie浏览器
Showbo.IsIE=!!document.all;
//从字符串或者xhr对象还原为json对象
Showbo.Ajax.ErrorJson={success:false,err:'发生严重错误,请联系管理员!'};
Showbo.GetJson=function(xhr){if(xhr.status==200||typeof xhr=="string"return eval("(" + (typeof xhr=="string"?xhr:xhr.responseText) + ')');return Showbo.Ajax.ErrorJson;}
//扩展IE下的XMLHttpRequest
if(Showbo.IsIE)window.XMLHttpRequest=function(){var acX=['msxml2.xmlhttp.5.0','msxml2.xmlhttp.4.0','msxml2.xmlhttp.3.0','msxml2.xmlhttp','microsoft.xmlhttp'],Xhr;for(var i=0;i<acX.length;i++)try{Xhr=new ActiveXObject(acX[i]);return Xhr;}catch(e){}return false;}
//ajax类库
Showbo.Ajax={pools:[],getObject:function(){for(var i=0;i<this.pools.length;i++)if(this.pools[i].status===0){this.pools[i].status=1;this.pools[i].xhr.onreadystatechange=function(){};this.pools[i].xhr.abort();return this.pools[i];}var xhr=new XMLHttpRequest();if(xhr.readyState==null){xhr.readyState=0;xhr.addEventListener("load",function(){xhr.readyState=4;if(typeof(xhr.onreadystatechange)=="function")xhr.onreadystatechange();},false);};this.pools[this.pools.length]={xhr:xhr,status:1};return this.pools[this.pools.length-1];},send:function(cfg){if(!cfg||!cfg.url)throw("url不正确!");var method=cfg.method,asy="boolean"==typeof(cfg.asy)?cfg.asy:true;if(!method)method="get";if(method.toLocaleLowerCase()=='get'){var _dc=new Date().getTime();cfg.params=cfg.params?cfg.params+'&_dc='+_dc:'_dc='+_dc;if(cfg.url.indexOf("?")!=-1)cfg.url+="&"+cfg.params;else cfg.url+="?"+cfg.params;cfg.params=null;}else if(typeof(cfg.params)=="undefined")cfg.params='';var o=this.getObject();if(!o.xhr)throw("未能创建ajax对象!");o.xhr.open(method,cfg.url,asy);if(method.toLocaleLowerCase()=='post')o.xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");o.xhr.onreadystatechange=function(){if(o.xhr.readyState==4){if(o.xhr.status==200||o.xhr.status==0){if("function"==typeof(cfg.success))cfg.success(o.xhr,cfg.otherParams);}else if("function"==typeof(cfg.failure))cfg.failure(o.xhr,cfg.otherParams);o.status=0;}};o.xhr.send(cfg.params);}}
//为iframe提交的回调函数
Showbo.Ajax.iframeJson=function(){var json=Showbo.$('showbo_ifr',true).document.body.innerHTML;if(/^\s*\{/.test(json))return Showbo.GetJson(json);return Showbo.Ajax.ErrorJson;}
//ajax的post方法
Showbo.Ajax.post=function(f,url,callback,otherParams){
if(f.enctype&&f.enctype.toLowerCase()=="multipart/form-data"){//含有file的表单提交到iframe
var ifr=document.getElementById('showbo_ifr');
if(!ifr){var dv=document.createElement('div');dv.style.display='none';document.body.appendChild(dv);dv.innerHTML='<iframe name="showbo_ifr" id="showbo_ifr"></iframe>';ifr=Showbo.$('showbo_ifr');
if(Showbo.IsIE)ifr.attachEvent('onload',function(){callback(Showbo.Ajax.iframeJson(),otherParams);});else ifr.addEventListener('load',function(){callback(Showbo.Ajax.iframeJson(),otherParams);},false);}f.target='showbo_ifr';f.submit();return false;}
//xhr提交
var params='',tmp;for(var i=0;i<f.elements.length;i++){if(f.elements[i].name){switch(f.elements[i].type){case 'hidden':case 'password':case 'text':case 'textarea':case 'select-one':params+=(params==''?'':'&')+f.elements[i].name+'='+encodeURIComponent(f.elements[i].value);break;case 'select-multiple':tmp='';for(var p=0;p<f.elements[i].options.length;p++)if(f.elements[i].options[p].selected)tmp+=(tmp==''?'':',')+f.elements[i].options[p].value;if(tmp!='')params+=(params==''?'':'&')+f.elements[i].name+'='+encodeURIComponent(tmp);break;case 'radio':case 'checkbox':if(f.elements[i].checked)params+=(params==''?'':'&')+f.elements[i].name+'='+encodeURIComponent(f.elements[i].value);break;}}}Showbo.Ajax.send({url:url,method:'post',params:params,otherParams:otherParams,success:callback,failure:callback});}

加支付宝好友偷能量挖...


原创文章,转载请注明出处:发一个支持iframe的无刷上传文件的ajax类库

评论(0)Web开发网
阅读(142)喜欢(0)JavaScript/Ajax开发技巧