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

前端  /  管理员 发布于 5年前   323

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="//article/' + 'javascript:false' + '"';   }  else if(typeof uri== 'string'){  iframeHtml += ' src="//article/' + 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上传操作汇总》进行学习。

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