ajax file upload + processing browser compatible

这次给大家带来ajax文件上传+处理浏览器兼容，ajax文件上传+处理浏览器兼容的注意事项有哪些，下面就是实战案例，一起来看一下。

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

jQuery.extend({
 createUploadIframe: function(id, uri)
 {
 //create frame
 var frameId = 'jUploadFrame' + id;
 var iframeHtml = '<iframe></iframe>';
 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('

');   if(data)  {   for(var i in data)   {   jQuery('').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("

")>-1){
  reg=/<pre class="brush:php;toolbar:false">(.+)/g;
  }else{  
  reg=/<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("<p>").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] );
 }
});</p></pre.>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JSONP怎么处理Ajax的跨域访问

ajax操作全局监测,用户session失效怎么处理

The above is the detailed content of ajax file upload + processing browser compatible. For more information, please follow other related articles on the PHP Chinese website!