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上传操作汇总》进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助。