Home > Web Front-end > JS Tutorial > ajax file upload + processing browser compatible

ajax file upload + processing browser compatible

php中世界最好的语言
Release: 2018-04-04 14:56:47
Original
1646 people have browsed it

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

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

jQuery.extend({
 createUploadIframe: function(id, uri)
 {
 //create frame
 var frameId = 'jUploadFrame' + id;
 var iframeHtml = '<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; />';
 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="&#39; + formId + &#39;" id="&#39; + formId + &#39;" enctype="multipart/form-data"></form>'); 
 if(data)
 {
  for(var i in data)
  {
  jQuery('<input type="hidden" name="&#39; + i + &#39;" value="&#39; + data[i] + &#39;" />').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 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] );
 }
});
Copy after login

相信看了本文案例你已经掌握了方法,更多精彩请关注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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template