ajax文件上传成功 解决浏览器兼容问题

ajaxfileupload控制很好用，不过发现上传文件后的结果为被浏览器处理，ie不会，谷哥和火狐都会进行处理，而且谷哥和火狐处理后的结果都不一样，这里对以上三种浏览器进行了兼容性调整。

jquery.extend({
 createuploadiframe: function(id, uri)
 {
 //create frame
 var frameid = 'juploadframe' + id;
 var iframehtml = '<iframe id="' + frameid + '" name="' + frameid + '" style="position:absolute; top:-9999px; left:-9999px"';
 if(window.activexobject)
 {
  if(typeof uri== 'boolean'){
  iframehtml += ' src="' + 'javascript:false' + '"';
 
  }
  else if(typeof uri== 'string'){
  iframehtml += ' src="' + uri + '"';
 
  } 
 }
 iframehtml += ' />';
 jquery(iframehtml).appendto(document.body);
 
 return jquery('#' + frameid).get(0);  
 },
 createuploadform: function(id,fileelementid,data,fileelement)
 {
 //create form 
 var formid = 'juploadform' + id;
 var fileid = 'juploadfile' + id;
 var form = jquery('<form action="" method="post" name="' + formid + '" id="' + formid + '" enctype="multipart/form-data"></form>'); 
 if(data)
 {
  for(var i in data)
  {
  jquery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendto(form);
  }  
 }
 var oldelement;
 if(fileelement == null)
  oldelement = jquery('#' + fileelementid);
 else
  oldelement = fileelement;
  
 var newelement = jquery(oldelement).clone();
 jquery(oldelement).attr('id', fileid);
 jquery(oldelement).before(newelement);
 jquery(oldelement).appendto(form);
  
 //set attributes
 jquery(form).css('position', 'absolute');
 jquery(form).css('top', '-1200px');
 jquery(form).css('left', '-1200px');
 jquery(form).appendto('body'); 
 return form;
 },
 
 ajaxfileupload: function(s) {
 // todo introduce global settings, allowing the client to modify them for all requests, not only timeout 
 s = jquery.extend({}, jquery.ajaxsettings, s);
 var id = new date().gettime() 
 var form = jquery.createuploadform(id, s.fileelementid, (typeof(s.data)=='undefined'?false:s.data),s.fileelement);
 var io = jquery.createuploadiframe(id, s.secureuri);
 var frameid = 'juploadframe' + id;
 var formid = 'juploadform' + id; 
 // watch for a new set of requests
 if ( s.global && ! jquery.active++ )
 {
  jquery.event.trigger( "ajaxstart" );
 }  
 var requestdone = false;
 // create the request object
 var xml = {} 
 if ( s.global )
  jquery.event.trigger("ajaxsend", [xml, s]);
 // wait for a response to come back
 var uploadcallback = function(istimeout)
 {  
  var io = 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;
   
  }else if(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;
  var status;
  try {
   status = istimeout != "timeout" ? "success" : "error";
   // make sure that the request was successful or notmodified
   if ( status != "error" )
   {
   // process the data (runs the xml through httpdata regardless of callback)
   console.log( jquery.uploadhttpdata);
   var data = jquery.uploadhttpdata(xml,s.datatype ); 
   // if a local callback was specified, fire it and pass it the data
   if ( s.success )
    s.success( data, status );
 
   // fire the global callback
   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);
  }
 
  // the request was completed
  if( s.global )
   jquery.event.trigger( "ajaxcomplete", [xml, s] );
 
  // handle the global ajax counter
  if ( s.global && ! --jquery.active )
   jquery.event.trigger( "ajaxstop" );
 
  // process result
  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
 
  }
 }
 // timeout checker
 if ( s.timeout > 0 ) 
 {
  settimeout(function(){
  // check to see if the request is still happening
  if( !requestdone ) uploadcallback( "timeout" );
  }, s.timeout);
 }
 try
 {
 
  var form = 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 ) {
 var data ="";
 data = (type == "xml" ? r.responsexml : r.responsetext);
 if ( type == "script" )
  jquery.globaleval( data );
 /**
  * auth garen 2016-06-17
  * 对文件上传后的响应结果进行处理，支持ie ff gc
  * */
 if ( type == "json" ){
  var reg ="";
  if(data.indexof("<pre>")>-1){
  reg=/<pre>(.+)<\/pre>/g;
  }else{  
  reg=/<pre.+?>(.+)<\/pre>/g; 
  }
  var result = data.match(reg);
  var stri1=regexp.$1; 
  if(stri1!=null&&stri1!="" &&stri1.trim().length>0){
   data = stri1;  
  }
  eval( "data =" + data);
 }
 if ( type == "html" )
  jquery("<div>").html(data).evalscripts();
 return data;
 },
 
 handleerror: function( s, xml, status, e ) {
 // if a local callback was specified, fire it
 if ( s.error )
  s.error( xml, status, e );
 
 // fire the global callback
 if ( s.global )
  jquery.event.trigger( "ajaxerror", [xml, s, e] );
 }
});

更多精彩内容请参考专题《ajax上传技术汇总》，《javascript文件上传操作汇总》和《jquery上传操作汇总》进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助。