• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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!=nullstri1!="" 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上传操作汇总》进行学习。

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

    您可能感兴趣的文章:
    • AJAX和JSP实现的基于WEB的文件上传的进度控制代码
    • ajax 文件上传应用简单实现
    • jQuery Ajax文件上传(php)
    • Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
    • Ajax方式提交带文件上传的表单及隐藏iframe应用
    • 利用ajaxfileupload插件实现文件上传无刷新的具体方法
    • php+ajax实现图片文件上传功能实例
    • ajaxFileUpload.js插件支持多文件上传的方法
    • ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
    • 基于ajax实现文件上传并显示进度条
    上一篇:ajax验证用户名和密码的实例代码
    下一篇:laypage前端分页插件实现ajax异步分页
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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