欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-26 09:54:38
ajaxfileupload控制很好用,不过发现上传文件后的结果为被浏览器处理,ie不会,谷哥和火狐都会进行处理,而且谷哥和火狐处理后的结果都不一样,这里对以上三种浏览器进...

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

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