ajax文件上传成功 解决浏览器兼容问题
程序员文章站
2022-05-26 09:54:38
ajaxfileupload控制很好用,不过发现上传文件后的结果为被浏览器处理,ie不会,谷哥和火狐都会进行处理,而且谷哥和火狐处理后的结果都不一样,这里对以上三种浏览器进...
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("<div>").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] ); } });
更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jquery上传操作汇总》进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助。
推荐阅读
-
ajax文件上传成功 解决浏览器兼容问题
-
Ajax请求过程中下载文件在FireFox(火狐)浏览器下的兼容问题
-
解决Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation"
-
图片上传(支持多张)——java 【解决(图片上传成功,ajax请求仍会返回错误)】
-
Zend_File上传成功但是找不到文件解决办法
-
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器_javascript技巧
-
ajax文件上传成功 解决浏览器兼容问题
-
ajax文件上传成功 解决浏览器兼容问题
-
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器_javascript技巧
-
Zend_File上传成功但是找不到文件解决办法