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


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] );
  }
});

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


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3