ajax file uploaded successfully, solving browser compatibility issues

这篇文章主要为大家详细介绍了ajax文件上传的相关资料，成功解决了浏览器兼容问题，感兴趣的小伙伴们可以参考一下

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

jQuery.extend({
 createUploadIframe: function(id, uri)
 {
 //create frame
 var frameId = 'jUploadFrame' + id;
 var iframeHtml = &#39;<iframe id="&#39; + frameId + &#39;" name="&#39; + frameId + &#39;" style="position:absolute; top:-9999px; left:-9999px"&#39;;
 if(window.ActiveXObject)
 {
  if(typeof uri== &#39;boolean&#39;){
  iframeHtml += &#39; src="&#39; + &#39;javascript:false&#39; + &#39;"&#39;;
 
  }
  else if(typeof uri== &#39;string&#39;){
  iframeHtml += &#39; src="&#39; + uri + &#39;"&#39;;
 
  } 
 }
 iframeHtml += &#39; />&#39;;
 jQuery(iframeHtml).appendTo(document.body);
 
 return jQuery(&#39;#&#39; + frameId).get(0);  
 },
 createUploadForm: function(id,fileElementId,data,fileElement)
 {
 //create form 
 var formId = &#39;jUploadForm&#39; + id;
 var fileId = &#39;jUploadFile&#39; + id;
 var form = jQuery(&#39;<form action="" method="POST" name="&#39; + formId + &#39;" id="&#39; + formId + &#39;" enctype="multipart/form-data"></form>&#39;); 
 if(data)
 {
  for(var i in data)
  {
  jQuery(&#39;<input type="hidden" name="&#39; + i + &#39;" value="&#39; + data[i] + &#39;" />&#39;).appendTo(form);
  }  
 }
 var oldElement;
 if(fileElement == null)
  oldElement = jQuery(&#39;#&#39; + fileElementId);
 else
  oldElement = fileElement;
  
 var newElement = jQuery(oldElement).clone();
 jQuery(oldElement).attr(&#39;id&#39;, fileId);
 jQuery(oldElement).before(newElement);
 jQuery(oldElement).appendTo(form);
  
 //set attributes
 jQuery(form).css(&#39;position&#39;, &#39;absolute&#39;);
 jQuery(form).css(&#39;top&#39;, &#39;-1200px&#39;);
 jQuery(form).css(&#39;left&#39;, &#39;-1200px&#39;);
 jQuery(form).appendTo(&#39;body&#39;); 
 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)==&#39;undefined&#39;?false:s.data),s.fileElement);
 var io = jQuery.createUploadIframe(id, s.secureuri);
 var frameId = &#39;jUploadFrame&#39; + id;
 var formId = &#39;jUploadForm&#39; + 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(&#39;#&#39; + formId);
  jQuery(form).attr(&#39;action&#39;, s.url);
  jQuery(form).attr(&#39;method&#39;, &#39;POST&#39;);
  jQuery(form).attr(&#39;target&#39;, frameId);
  if(form.encoding)
  {
  jQuery(form).attr(&#39;encoding&#39;, &#39;multipart/form-data&#39;);  
  }
  else
  { 
  jQuery(form).attr(&#39;enctype&#39;, &#39;multipart/form-data&#39;);  
  }  
  jQuery(form).submit();
 
 } catch(e) 
 {  
  jQuery.handleError(s, xml, null, e);
 }
  
 jQuery(&#39;#&#39; + frameId).load(uploadCallback);
 return {abort: function(){
  try
  {
  jQuery(&#39;#&#39; + 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 class="brush:php;toolbar:false">")>-1){
  reg=/<pre class="brush:php;toolbar:false">(.+)<\/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("<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] );
 }
});

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Ajax实现智能提示搜索功能

反向Ajax 30分钟快速掌握

Ajax全局加载框(Loading效果)的配置

The above is the detailed content of ajax file uploaded successfully, solving browser compatibility issues. For more information, please follow other related articles on the PHP Chinese website!