ajaxfileUpload.js兼容ie7、8、9、10、11、firefox、chrome等浏览器的js代码

前端之家收集整理的这篇文章主要介绍了ajaxfileUpload.js兼容ie7、8、9、10、11、firefox、chrome等浏览器的js代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

ajaxfileUpload.js兼容ie7、8、9、10、11、firefox、chrome等浏览器的js代码


因为项目需要,引入了ajaxfileUpload.js的js插件,从开始用 ,就一直问题多多,我当时是结合springmvc使用的。
如1、使用springmvc的@responseBody返回,不可以,需要改成response.getWrite().write()方法解决ie下返回的是json文件的问题。
如2、返回的结果需要eval()处理等。
如3、缺少错误函数的处理等。
如4、在同一页面上传多次,会出现遮罩层重叠,弹出框弹出多次的问题。【需要在代码中做一个计数器。】
如5、handleError方法写的不规范等问题,引起前台总报js错误
等等,使用了这个js插件,有种被坑的感觉,一直在解决各种问题。
目前这个js插件已经解决以上所有问题,网上提供的这个插件都或多或少缺少一些功能
自己痛苦了这么多,希望对使用此控件的人有用,减少一些查找和解决错误的时间。
附上代码

// JavaScript Document jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) //var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />'); (jQuery.browser.version=="9.0" || jQuery"10.0"){ var io = document.createElement('iframe'); io.id = frameId; io.name ; }else "6.0" "7.0" "8.0"'<iframe id="' + frameId + '" name="' '" />'); (typeof uri== 'boolean'){ io.src 'javascript:false'; } 'string'= uri} else { ); io; io} io.style.position 'absolute'.top '-1000px'.left ; document.body.appendChild(io); return io}, createUploadForm fileElementId data//create form var formId 'jUploadForm' ; var fileId 'jUploadFile' var form = jQuery'<form action="" method="POST" name="' + formId '" id="' '" enctype="multipart/form-data"></form>'var oldElement '#' + fileElementId); var newElement (oldElement).clone(); jQuery).attr'id' fileId); jQuery).before(newElement).appendTo(form); //add data (data{ for var i in data{ $'<input type="hidden" name="' + i '" value="' + data[i] ); } } //set attributes jQuery).css'position' 'top''-1200px''left''body'return form ajaxFileUpload(s// TODO introduce global settings,allowing the client to modify them for all requests,not only timeout s ({}, jQuery.ajaxSettings svar id = s.id; //var id = s.fileElementId; .createUploadForm.fileElementIds.data.createUploadIframe.secureuri; ( s.global && ! jQuery.active++ ){ // Watch for a new set of requests jQueryevent.trigger( "ajaxStart" ); } var requestDone = false; // Create the request object var xml = {}; ){ jQuery"ajaxSend" [xml]); } var uploadCallback (isTimeout){ // Wait for a response to come back .getElementById(frameIdtry.contentWindow){ xml.responseText = io.document?io.innerHTML:null; xml.responseXML XMLDocument:io.contentDocumentcatch(e.handleError xml e( xml || isTimeout "timeout"){ requestDone truevar statustry { status = isTimeout != "timeout" ? "success" : "error"// Make sure that the request was successful or notmodified ( status "error" // process the data (runs the xml through httpData regardless of callback) var data .uploadHttpData( xml.dataType .success // ifa local callback was specified,fire it and pass it the data s.success( data status }; // Fire the global callback jQuery"ajaxSuccess"}; } else{ jQuery status} ){ status ; jQuery// The request was completed jQuery"ajaxComplete"}; // Handle the global AJAX counter ! --jQuery"ajaxStop"}; .complete){ s(xml}; jQuery).unbind(); setTimeout(){ ).remove(); }}, 100); xml }; // Timeout checker .timeout > 0 ){ setTimeout(){(!requestDone ){uploadCallback);}},0)">.timeout+ formId'action'.url'method''POST''target' frameId.encoding){ form.encoding 'multipart/form-data'{ form.enctype } jQuery).submit(); ){ jQuery/*if(window.attachEvent){ document.getElementById(frameId).attachEvent('onload',uploadCallback); } else{ document.getElementById(frameId).addEventListener('load',uploadCallback,false); } */ jQuery+ frameId).load(uploadCallbackreturn {abortfunction () {}}; uploadHttpData( r type !type; data = type "xml" || data ? r: r.responseText// ifthe type is "script",eval it in global context ( type "script" .globalEval( data } // Get the JavaScript object,ifJSON is used. "json" ){ data = r; var start = data.indexOf">"(start != -1var end "<" start + { data .substringendeval"data = " // evaluate scripts within html "html" "<div>").html).evalScripts(); } return data /*handleError: function( s,xml,status,e ) { // If a local callback was specified,fire it if ( s.error ) s.error( xml,e ); // Fire the global callback if ( s.global ) jQuery.event.trigger( "ajaxError",[xml,s,e] ); }*/ handleError xhr e // If a local callback was specified,fire it if .error { s.error.call.context || s// Fire the global callback { ? jQuery.context: jQuery).trigger"ajaxError"[xhr} });

猜你在找的Ajax相关文章