How to realize successful File upload and solve browser compatibility problem by ajax

This article mainly shows you "ajax how to achieve successful file upload and solve browser compatibility problems", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "ajax how to achieve successful file upload and solve browser compatibility problems" this article.

Ajaxfileupload control is easy to use, but it is found that the result of uploading files will be processed by the browser, IE will not, Google and Firefox will handle it, and the results of Google and Firefox are different. Here, compatibility adjustments have been made for the above three browsers.

JQuery.extend ({createUploadIframe: function (id, uri) {/ / create frame var frameId = 'jUploadFrame' + id; var 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 ('') If (data) {for (var i in data) {jQuery (') .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 [XSS _ clean]: 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 [XSS _ clean]: 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 * process the response result after the file is uploaded. Support IE FF GC * * / if (type = = "json") {var reg= "; if (data.indexOf (") >-1) {reg=/ (. +) / g;} else {reg=/ (. +) / g. } var result = data.match (reg); var stri1=RegExp.$1; if (stri1length = "& & stri1.trim () .length > 0) {data = stri1;} eval (" data = "+ data);} if (type = =" html ") jQuery (") .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]);}) The above is all the contents of the article "how to successfully upload files and solve browser compatibility problems in ajax". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!