ajax檔案上傳成功 解決瀏覽器安全色問題_AJAX相關

ajaxfileupload控制很好用，不過發現上傳檔案後的結果為被瀏覽器處理，IE不會，穀哥和Firefox都會進行處理，而且穀哥和Firefox處理後的結果都不一樣，這裡對以上三種瀏覽器進行了相容性調整。

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

以上就是本文的全部內容，希望對大家的學習有所協助。