Heim > Web-Frontend > js-Tutorial > Ajax-Datei wurde erfolgreich hochgeladen, wodurch Probleme mit der Browserkompatibilität behoben wurden

Ajax-Datei wurde erfolgreich hochgeladen, wodurch Probleme mit der Browserkompatibilität behoben wurden

亚连
Freigeben: 2018-05-23 17:37:29
Original
1662 Leute haben es durchsucht

这篇文章主要为大家详细介绍了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] );
 }
});
Nach dem Login kopieren

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

相关文章:

Ajax实现智能提示搜索功能

反向Ajax 30分钟快速掌握

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

Das obige ist der detaillierte Inhalt vonAjax-Datei wurde erfolgreich hochgeladen, wodurch Probleme mit der Browserkompatibilität behoben wurden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage