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

ajaxfileupload控制很好用，不过发现上传文件后的结果为被浏览器处理，IE不会，谷哥和火狐都会进行处理，而且谷哥和火狐处理后的结果都不一样，这里对以上三种浏览器进行了兼容性调整。
jQuery.extend({
  createUploadIframe: function(id, uri)
  {
    //create frame
    var frameId = 'jUploadFrame' + id;
    var iframeHtml = '</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.&#99;reateUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'&#63;false:s.data),s.fileElement);
    var io = jQuery.&#99;reateUploadIframe(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&#63;io.contentWindow.document.body.innerHTML:null;
           xml.responseXML = io.contentWindow.document.XMLDocument&#63;io.contentWindow.document.XMLDocument:io.contentWindow.document;
           
        }else if(io.contentDocument)
        {
           xml.responseText = io.contentDocument.document.body&#63;io.contentDocument.document.body.innerHTML:null;
          xml.responseXML = io.contentDocument.document.XMLDocument&#63;io.contentDocument.document.XMLDocument:io.contentDocument.document;
        }            
      }catch(e)
      {
        jQuery.h&#97;ndleError(s, xml, null, e);
      }
      if ( xml || isTimeout == "timeout") 
      {        
        requestDone = true;
        var status;
        try {
          status = isTimeout != "timeout" &#63; "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 &#97;nd 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.h&#97;ndleError(s, xml, status);
        } catch(e) 
        {
          status = "error";
          jQuery.h&#97;ndleError(s, xml, status, e);
        }
 
        // The request was completed
        if( s.global )
          jQuery.event.trigger( "ajaxComplete", [xml, s] );
 
        // H&#97;ndle the global AJAX &#99;ounter
        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.h&#97;ndleError(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.h&#97;ndleError(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" &#63; 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.+&#63;>(.+)</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;
  },
   
  h&#97;ndleError: 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] );
  }
});</pre>

<p style="TEXT-INDENT: 2em">以上就是本文的全部内容，希望对大家的学习有所帮助。</p></div>
                <div class="prev-next">
					<div class="prev">上一篇：<a href="/ajax/item-18796.html">laypage前端分页插件实现ajax异步分页</a></div><div class="next">下一篇：<a href="/ajax/item-18794.html">ajax验证用户名和密码的实例代码</a></div>
				</div>
			</div>
			<!--广告 start-->
			<div class="qf-ads"><ul class="qf-ads-nUl-12"><li><a href="" target="_blank"><img src="/uploads/images/ads/202306/20230610084915300842.jpg"></a><a href="" target="_blank" class="alink"><label>广告</label><span>商业广告，理性选择</span></a></li></ul></div>
			<div class="qf-article-container">
				<div class="qf-cms-name">
					<h3>相关推荐</h3>
				</div>
				<div class="qf-cms-container">
					<ul class="article-list-relationship">
											<li><a href="/ajax/item-19804.html" title="ajax设置async校验用户名是否存在的实现方法" target="_blank">ajax设置async校验用户名是否存在的实现方法</a>
						</li>
											<li><a href="/ajax/item-19805.html" title="IE下Ajax提交乱码的快速解决方法" target="_blank">IE下Ajax提交乱码的快速解决方法</a>
						</li>
											<li><a href="/ajax/item-19806.html" title="Ajax表单异步上传文件实例代码（包括文件域）" target="_blank">Ajax表单异步上传文件实例代码（包括文件域）</a>
						</li>
											<li><a href="/ajax/item-19807.html" title="Ajax 高级功能之ajax向服务器发送数据" target="_blank">Ajax 高级功能之ajax向服务器发送数据</a>
						</li>
											<li><a href="/ajax/item-19802.html" title="js+ajax处理java后台返回的json对象循环创建到表格的方法" target="_blank">js+ajax处理java后台返回的json对象循环创建到表格的方法</a>
						</li>
											<li><a href="/ajax/item-19803.html" title="Ajax获取数据然后显示在页面的实现方法" target="_blank">Ajax获取数据然后显示在页面的实现方法</a>
						</li>
											<li><a href="/ajax/item-19801.html" title="ajax同步验证单号是否存在的方法" target="_blank">ajax同步验证单号是否存在的方法</a>
						</li>
											<li><a href="/ajax/item-19800.html" title="Ajax 异步加载解析" target="_blank">Ajax 异步加载解析</a>
						</li>
											<li><a href="/ajax/item-19799.html" title="Ajax技术组成与核心原理分析" target="_blank">Ajax技术组成与核心原理分析</a>
						</li>
											<li><a href="/ajax/item-19798.html" title="图文解析AJAX的原理" target="_blank">图文解析AJAX的原理</a>
						</li>
											<li><a href="/ajax/item-19796.html" title="ajax方式实现注册功能(提交数据到后台数据库完成交互)" target="_blank">ajax方式实现注册功能(提交数据到后台数据库完成交互)</a>
						</li>
											<li><a href="/ajax/item-19797.html" title="Ajax结合php实现二级联动" target="_blank">Ajax结合php实现二级联动</a>
						</li>
											<li><a href="/ajax/item-19795.html" title="AJAX应用中必须要掌握的重点知识(分享)" target="_blank">AJAX应用中必须要掌握的重点知识(分享)</a>
						</li>
											<li><a href="/ajax/item-19793.html" title="Ajax+php实现商品分类三级联动" target="_blank">Ajax+php实现商品分类三级联动</a>
						</li>
											<li><a href="/ajax/item-19794.html" title="Ajax商品分类三级联动的简单实现(案例)" target="_blank">Ajax商品分类三级联动的简单实现(案例)</a>
						</li>
											<li><a href="/ajax/item-19792.html" title="ajax异步请求刷新" target="_blank">ajax异步请求刷新</a>
						</li>
											<li><a href="/ajax/item-19790.html" title="通过Ajax方式上传文件使用FormData进行Ajax请求" target="_blank">通过Ajax方式上传文件使用FormData进行Ajax请求</a>
						</li>
											<li><a href="/ajax/item-19791.html" title="jQuery Ajax方式上传文件的方法" target="_blank">jQuery Ajax方式上传文件的方法</a>
						</li>
											<li><a href="/ajax/item-19789.html" title="Ajax学习全套(最全最经典)" target="_blank">Ajax学习全套(最全最经典)</a>
						</li>
											<li><a href="/ajax/item-19785.html" title="使用ajax技术实现txt弹出在页面上的方法" target="_blank">使用ajax技术实现txt弹出在页面上的方法</a>
						</li>
										</ul>
				</div>	
			</div>
		</div>
		<div class="sidebar">
			<!--广告 start-->
			<div class="qf-ads"><ul class="qf-ads-nUl-9"><li><a href="https://www.aliyun.com/activity/new/index?userCode=6qkxlezw" target="_blank"><img src="/uploads/images/ads/202306/20230609231605989299.jpg"></a><a href="https://www.aliyun.com/activity/new/index?userCode=6qkxlezw" target="_blank" class="alink"><label>广告</label><span>商业广告，理性选择</span></a></li></ul></div>
			<div class="qf-cms-name">
				<h3>文章分类</h3>
			</div>
			<div class="qf-cms-container">
				<div class="qf-category-list">
									<a href="/php/index.html" title="PHP编程" target="_blank">PHP编程</a>
									<a href="/regular/index.html" title="正则表达式" target="_blank">正则表达式</a>
									<a href="/javascript/index.html" title="JavaScript" target="_blank">JavaScript</a>
									<a href="/css/index.html" title="CSS/HTML" target="_blank">CSS/HTML</a>
									<a href="/rss/index.html" title="XML/RSS" target="_blank">XML/RSS</a>
									<a href="/ajax/index.html" title="AJAX相关" target="_blank">AJAX相关</a>
									<a href="/programming/hacker/index.html" title="黑客相关" target="_blank">黑客相关</a>
									<a href="/programming/other/index.html" title="相关技巧" target="_blank">相关技巧</a>
								</div>
			</div>
			<div class="qf-cms-name">
				<h3>热门关键词</h3>
			</div>
			<div class="qf-cms-container">
				<div class="qf-tag-list">
									<a href="https://zhannei.baidu.com/cse/site?q=雪佛兰&cc=fuphp.cn&ie=utf-8" title="雪佛兰" target="_blank">雪佛兰</a>
									<a href="https://zhannei.baidu.com/cse/site?q=通用&cc=fuphp.cn&ie=utf-8" title="通用" target="_blank">通用</a>
									<a href="https://zhannei.baidu.com/cse/site?q=奢华&cc=fuphp.cn&ie=utf-8" title="奢华" target="_blank">奢华</a>
									<a href="https://zhannei.baidu.com/cse/site?q=劳斯莱斯&cc=fuphp.cn&ie=utf-8" title="劳斯莱斯" target="_blank">劳斯莱斯</a>
									<a href="https://zhannei.baidu.com/cse/site?q=旗舰版&cc=fuphp.cn&ie=utf-8" title="旗舰版" target="_blank">旗舰版</a>
									<a href="https://zhannei.baidu.com/cse/site?q=64位&cc=fuphp.cn&ie=utf-8" title="64位" target="_blank">64位</a>
									<a href="https://zhannei.baidu.com/cse/site?q=收藏夹&cc=fuphp.cn&ie=utf-8" title="收藏夹" target="_blank">收藏夹</a>
									<a href="https://zhannei.baidu.com/cse/site?q=解调器&cc=fuphp.cn&ie=utf-8" title="解调器" target="_blank">解调器</a>
									<a href="https://zhannei.baidu.com/cse/site?q=网卡&cc=fuphp.cn&ie=utf-8" title="网卡" target="_blank">网卡</a>
									<a href="https://zhannei.baidu.com/cse/site?q=网线&cc=fuphp.cn&ie=utf-8" title="网线" target="_blank">网线</a>
									<a href="https://zhannei.baidu.com/cse/site?q=分辨率&cc=fuphp.cn&ie=utf-8" title="分辨率" target="_blank">分辨率</a>
									<a href="https://zhannei.baidu.com/cse/site?q=家电&cc=fuphp.cn&ie=utf-8" title="家电" target="_blank">家电</a>
									<a href="https://zhannei.baidu.com/cse/site?q=4k&cc=fuphp.cn&ie=utf-8" title="4k" target="_blank">4k</a>
									<a href="https://zhannei.baidu.com/cse/site?q=显示器&cc=fuphp.cn&ie=utf-8" title="显示器" target="_blank">显示器</a>
									<a href="https://zhannei.baidu.com/cse/site?q=header&cc=fuphp.cn&ie=utf-8" title="header" target="_blank">header</a>
									<a href="https://zhannei.baidu.com/cse/site?q=USER_AGENT&cc=fuphp.cn&ie=utf-8" title="USER_AGENT" target="_blank">USER_AGENT</a>
									<a href="https://zhannei.baidu.com/cse/site?q=色彩&cc=fuphp.cn&ie=utf-8" title="色彩" target="_blank">色彩</a>
									<a href="https://zhannei.baidu.com/cse/site?q=图形&cc=fuphp.cn&ie=utf-8" title="图形" target="_blank">图形</a>
									<a href="https://zhannei.baidu.com/cse/site?q=商业&cc=fuphp.cn&ie=utf-8" title="商业" target="_blank">商业</a>
									<a href="https://zhannei.baidu.com/cse/site?q=生成&cc=fuphp.cn&ie=utf-8" title="生成" target="_blank">生成</a>
					
				</div>
			</div>
			<!--广告 start-->
			<div class="qf-ads"><ul class="qf-ads-nUl-10"><li><a href="https://www.aliyun.com/activity/new/index?userCode=6qkxlezw" target="_blank"><img src="/uploads/images/ads/202306/20230609231537994005.jpg"></a><a href="https://www.aliyun.com/activity/new/index?userCode=6qkxlezw" target="_blank" class="alink"><label>广告</label><span>商业广告，理性选择</span></a></li></ul></div>
			<div class="qf-cms-name">
				<h3>热门文章</h3>
			</div>
			<div class="qf-cms-container">
				<ul class="qf-article-list">
													<li><em>1</em>
						<a href="/cehua/item-29482.html" title="什么是Meta标签？ 哪些Meta标签对搜索引擎SEO优化有作用？" target="_blank">什么是Meta标签？ 哪些Meta标签对搜索引擎SEO优化有作用？</a>
					</li>
									<li><em>2</em>
						<a href="/mac/item-22368.html" title="Mac设置VPN来登录youtube等国外网站的步骤" target="_blank">Mac设置VPN来登录youtube等国外网站的步骤</a>
					</li>
									<li><em>3</em>
						<a href="/jingyan/item-20869.html" title="各大搜索引擎登录入口,网站收录入口" target="_blank">各大搜索引擎登录入口,网站收录入口</a>
					</li>
									<li><em>4</em>
						<a href="/qilin/item-30816.html" title="Openvpn在麒麟操作系统上的配置方法" target="_blank">Openvpn在麒麟操作系统上的配置方法</a>
					</li>
									<li><em>5</em>
						<a href="/bios/item-23598.html" title="联想笔记本BIOS设置图解中文详细说明" target="_blank">联想笔记本BIOS设置图解中文详细说明</a>
					</li>
									<li><em>6</em>
						<a href="/bios/item-27940.html" title="AMI BIOS设置图解教程+Award Bios设置全程图解" target="_blank">AMI BIOS设置图解教程+Award Bios设置全程图解</a>
					</li>
									<li><em>7</em>
						<a href="/mac/item-23040.html" title="Mac怎么切换主显示器 苹果电脑Mac双显示器设置主显方法图解" target="_blank">Mac怎么切换主显示器 苹果电脑Mac双显示器设置主显方法图解</a>
					</li>
									<li><em>8</em>
						<a href="/yunying/other/item-29261.html" title="分享最受美国人喜欢的十大搜索引擎" target="_blank">分享最受美国人喜欢的十大搜索引擎</a>
					</li>
									<li><em>9</em>
						<a href="/tools/item-30528.html" title="分享10个常见的SQL注入工具" target="_blank">分享10个常见的SQL注入工具</a>
					</li>
									<li><em>10</em>
						<a href="/mac/item-23628.html" title="mac系统中自带的邮件程序怎么添加qq邮箱帐号?" target="_blank">mac系统中自带的邮件程序怎么添加qq邮箱帐号?</a>
					</li>
								</ul>
			</div>
			<div class="qf-cms-name">
				<h3>最新更新</h3>
			</div>
			<div class="qf-cms-container">
				<ul class="qf-article-list">
													<li><a href="/changshi/item-79334.html" title="无线路由器经常断线 故障解决" target="_blank">无线路由器经常断线 故障解决</a>
					</li>
									<li><a href="/changshi/item-79351.html" title="怎么在Mac上设置锁屏不待机" target="_blank">怎么在Mac上设置锁屏不待机</a>
					</li>
									<li><a href="/changshi/item-79354.html" title="VHD和VHDX硬盘格式有什么区别?" target="_blank">VHD和VHDX硬盘格式有什么区别?</a>
					</li>
									<li><a href="/changshi/item-79363.html" title="关闭Aero Shake节约系统资源的方法" target="_blank">关闭Aero Shake节约系统资源的方法</a>
					</li>
									<li><a href="/changshi/item-79362.html" title="怎么更改Mac中的邮件字体大小" target="_blank">怎么更改Mac中的邮件字体大小</a>
					</li>
									<li><a href="/changshi/item-79371.html" title="提高WIN7系统开机速度方法分享" target="_blank">提高WIN7系统开机速度方法分享</a>
					</li>
									<li><a href="/changshi/item-79361.html" title="Mac系统怎么更改用户登录密码" target="_blank">Mac系统怎么更改用户登录密码</a>
					</li>
									<li><a href="/changshi/item-79358.html" title="Mac上如何修改时间和日期" target="_blank">Mac上如何修改时间和日期</a>
					</li>
									<li><a href="/changshi/item-79366.html" title="如何将常用应用固定至开始屏幕或任务栏" target="_blank">如何将常用应用固定至开始屏幕或任务栏</a>
					</li>
									<li><a href="/mysql/item-79372.html" title="MySQL中replace into语句的用法详解（insert into 的增强版）" target="_blank">MySQL中replace into语句的用法详解（insert into 的增强版）</a>
					</li>
								</ul>
			</div>
			<!--广告 start-->
			<div class="qf-ads qf-ads-ontop"><ul class="qf-ads-nUl-11"><li><a href="http://www.hnqfu.cn" target="_blank"><img src="/uploads/images/ads/202306/20230610081510415263.jpg"></a><a href="http://www.hnqfu.cn" target="_blank" class="alink"><label>广告</label><span>商业广告，理性选择</span></a></li></ul></div>
		</div>
	</div>
</div>

<script type="text/javascript">
var scrollPh = 1680;
layui.use('code', function(){
	layui.code({
		elem: 'pre',
		title: '代码',
		encode: false,
		ln: true,
		//skin: 'dark',
		//about: '123',
		about: [
			//'<a href="javascript:;">复制</a>'
		]
	});
});
</script>

<div class="wrap bottom">
	<div class="wrapper clearfix">
		<div class="links">
			<a href="http://www.fuphp.cn">网站首页</a>
							　|　<a href="/aboutus.html">关于我们</a>
							　|　<a href="/wangzhanshengming.html">免责声明</a>
							　|　<a href="/guanggaohezuo.html">广告合作</a>
							　|　<a href="/contact.html">联系我们</a>
					</div>
		<div class="copyright">
			Copyright @ 2015-2024 <a href="" title="河南全福网络科技有限公司专业网制设计制作，PHP二次开发">福编程 fuphp</a> All Rights Reserved.
		</div>
		<div class="copyright">
			<a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">豫ICP备15036959号-4</a>
		</div>
    </div>
</div>

<script type="text/javascript">
layui.config({
	base: '/static/js/layuiadmin/' //静态资源所在路径
}).extend({
	qf: '../qfplus/qf/qf',
	contact: '../qfplus/contact/contact',
}).use(['contact'], function(){
	var contact = layui.contact;
	contact.render({'position':	'left', 'oappend':'.qf-quick-bar'});
	//菜单
	jQuery(".submenu").slide({ 
		type:"menu",// 效果类型，针对菜单/导航而引入的参数（默认slide）
		titCell:".nLi", //鼠标触发对象
		targetCell:".sub", //titCell里面包含的要显示/消失的对象
		titOnClassName:'current',
		effect:"slideDown", //targetCell下拉效果
		delayTime:300 , //效果时间
		triggerTime:0, //鼠标延迟触发时间（默认150）
		returnDefault:true //鼠标移走后返回默认状态，例如默认频道是“预告片”，鼠标移走后会返回“预告片”（默认false）
	});
	//表单
	var form = layui.form;
	form.render(null, 'component-form');
	/* 监听提交 */
	form.on('submit(component-form-submit)', function(data){
		var searchkey = data.field.searchkey;
		return true;
	});
	//滚动固顶
	$(document).scroll(function(){
		var sTop = $(document).scrollTop();
		if( sTop >= scrollPh ){
			$('.qf-ads-ontop').css({'position':'fixed', 'top':'0'});
		}else{
			$('.qf-ads-ontop').css({'position':'relative'});
		}
	});
});
<!--百度统计------------------>
</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?9eb8fd7c57fefc4283caaf6d0c7e37f7";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>
网站首页

网络编程

数据库

操作系统

平面设计

网站运营

网络安全

电脑相关

手机学院

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

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

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