视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
ajax文件上传+处理浏览器兼容
2020-11-27 19:56:31 责编:小采
文档

这次给大家带来ajax文件上传+处理浏览器兼容,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("<p>").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] );
 }
});

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

JSONP怎么处理Ajax的跨域访问

ajax操作全局监测,用户session失效怎么处理

下载本文
显示全文
专题