ajax文件上传成功 解决浏览器兼容问题
ajaxfileupload控制很好用,不过发现上传文件后的结果为被浏览器处理,IE不会,谷哥和火狐都会进行处理,而且谷哥和火狐处理后的结果都不一样,这里对以上三种浏览器进行了兼容性调整。
jQuery.extend({ createUploadIframe:function(id,uri) { //createframe varframeId='jUploadFrame'+id; variframeHtml='<iframeid="'+frameId+'"name="'+frameId+'"style="position:absolute;top:-9999px;left:-9999px"'; if(window.ActiveXObject) { if(typeofuri=='boolean'){ iframeHtml+='src="'+'javascript:false'+'"'; } elseif(typeofuri=='string'){ iframeHtml+='src="'+uri+'"'; } } iframeHtml+='/>'; jQuery(iframeHtml).appendTo(document.body); returnjQuery('#'+frameId).get(0); }, createUploadForm:function(id,fileElementId,data,fileElement) { //createform varformId='jUploadForm'+id; varfileId='jUploadFile'+id; varform=jQuery('<formaction=""method="POST"name="'+formId+'"id="'+formId+'"enctype="multipart/form-data"></form>'); if(data) { for(variindata) { jQuery('<inputtype="hidden"name="'+i+'"value="'+data[i]+'"/>').appendTo(form); } } varoldElement; if(fileElement==null) oldElement=jQuery('#'+fileElementId); else oldElement=fileElement; varnewElement=jQuery(oldElement).clone(); jQuery(oldElement).attr('id',fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); //setattributes jQuery(form).css('position','absolute'); jQuery(form).css('top','-1200px'); jQuery(form).css('left','-1200px'); jQuery(form).appendTo('body'); returnform; }, ajaxFileUpload:function(s){ //TODOintroduceglobalsettings,allowingtheclienttomodifythemforallrequests,notonlytimeout s=jQuery.extend({},jQuery.ajaxSettings,s); varid=newDate().getTime() varform=jQuery.createUploadForm(id,s.fileElementId,(typeof(s.data)=='undefined'?false:s.data),s.fileElement); vario=jQuery.createUploadIframe(id,s.secureuri); varframeId='jUploadFrame'+id; varformId='jUploadForm'+id; //Watchforanewsetofrequests if(s.global&&!jQuery.active++) { jQuery.event.trigger("ajaxStart"); } varrequestDone=false; //Createtherequestobject varxml={} if(s.global) jQuery.event.trigger("ajaxSend",[xml,s]); //Waitforaresponsetocomeback varuploadCallback=function(isTimeout) { vario=document.getElementById(frameId); try { if(io.contentWindow) { xml.responseText=io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null; xml.responseXML=io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document; }elseif(io.contentDocument) { xml.responseText=io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null; xml.responseXML=io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document; } }catch(e) { jQuery.handleError(s,xml,null,e); } if(xml||isTimeout=="timeout") { requestDone=true; varstatus; try{ status=isTimeout!="timeout"?"success":"error"; //Makesurethattherequestwassuccessfulornotmodified if(status!="error") { //processthedata(runsthexmlthroughhttpDataregardlessofcallback) console.log(jQuery.uploadHttpData); vardata=jQuery.uploadHttpData(xml,s.dataType); //Ifalocalcallbackwasspecified,fireitandpassitthedata if(s.success) s.success(data,status); //Firetheglobalcallback if(s.global) jQuery.event.trigger("ajaxSuccess",[xml,s]); }else jQuery.handleError(s,xml,status); }catch(e) { status="error"; jQuery.handleError(s,xml,status,e); } //Therequestwascompleted if(s.global) jQuery.event.trigger("ajaxComplete",[xml,s]); //HandletheglobalAJAXcounter if(s.global&&!--jQuery.active) jQuery.event.trigger("ajaxStop"); //Processresult if(s.complete) s.complete(xml,status); jQuery(io).unbind() setTimeout(function() {try { jQuery(io).remove(); jQuery(form).remove(); }catch(e) { jQuery.handleError(s,xml,null,e); } },100) xml=null } } //Timeoutchecker if(s.timeout>0) { setTimeout(function(){ //Checktoseeiftherequestisstillhappening if(!requestDone)uploadCallback("timeout"); },s.timeout); } try { varform=jQuery('#'+formId); jQuery(form).attr('action',s.url); jQuery(form).attr('method','POST'); jQuery(form).attr('target',frameId); if(form.encoding) { jQuery(form).attr('encoding','multipart/form-data'); } else { jQuery(form).attr('enctype','multipart/form-data'); } jQuery(form).submit(); }catch(e) { jQuery.handleError(s,xml,null,e); } jQuery('#'+frameId).load(uploadCallback); return{abort:function(){ try { jQuery('#'+frameId).remove(); jQuery(form).remove(); } catch(e){} }}; }, uploadHttpData:function(r,type){ vardata=""; data=(type=="xml"?r.responseXML:r.responseText); if(type=="script") jQuery.globalEval(data); /** *authgaren2016-06-17 *对文件上传后的响应结果进行处理,支持IEFFGC **/ if(type=="json"){ varreg=""; if(data.indexOf("<pre>")>-1){ reg=/<pre>(.+)<\/pre>/g; }else{ reg=/<pre.+?>(.+)<\/pre>/g; } varresult=data.match(reg); varstri1=RegExp.$1; if(stri1!=null&&stri1!=""&&stri1.trim().length>0){ data=stri1; } eval("data="+data); } if(type=="html") jQuery("<div>").html(data).evalScripts(); returndata; }, handleError:function(s,xml,status,e){ //Ifalocalcallbackwasspecified,fireit if(s.error) s.error(xml,status,e); //Firetheglobalcallback if(s.global) jQuery.event.trigger("ajaxError",[xml,s,e]); } });
更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助。