首页 / 脚本样式 / Ajax / ajax文件上传成功 解决浏览器兼容问题

ajaxfileupload控制很好用，不过发现上传文件后的结果为被浏览器处理，IE不会，谷哥和火狐都会进行处理，而且谷哥和火狐处理后的结果都不一样，这里对以上三种浏览器进行了兼容性调整。

jQuery.extend（{createUploadIframe: function（id, uri）{//create framevar 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 formvar 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）;elseoldElement = fileElement; var newElement = jQuery（oldElement）.clone（）;jQuery（oldElement）.attr（"id", fileId）;jQuery（oldElement）.before（newElement）;jQuery（oldElement）.appendTo（form）; //set attributesjQuery（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 timeouts = 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 requestsif （ s.global && ！ jQuery.active++ ）{jQuery.event.trigger（ "ajaxStart" ）;}var requestDone = false;// Create the request objectvar xml = {}if （ s.global ）jQuery.event.trigger（"ajaxSend", [xml, s]）;// Wait for a response to come backvar 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 notmodifiedif （ 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 dataif （ s.success ）s.success（ data, status ）; // Fire the global callbackif（ s.global ）jQuery.event.trigger（ "ajaxSuccess", [xml, s] ）;} elsejQuery.handleError（s, xml, status）;} catch（e） {status = "error";jQuery.handleError（s, xml, status, e）;} // The request was completedif（ s.global ）jQuery.event.trigger（ "ajaxComplete", [xml, s] ）; // Handle the global AJAX counterif （ s.global && ！ --jQuery.active ）jQuery.event.trigger（ "ajaxStop" ）; // Process resultif （ 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 checkerif （ s.timeout > 0 ） {setTimeout（function（）{// Check to see if the request is still happeningif（ ！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 itif （ s.error ）s.error（ xml, status, e ）; // Fire the global callbackif （ s.global ）jQuery.event.trigger（ "ajaxError", [xml, s, e] ）;}}）;

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