兼容ie的jquery ajax文件上传
浏览数：35 /
时间：2015年06月09日
Ajax文件上传插件很多，但兼容性各不一样，许多是对ie不兼容的，另外项目中是要求将网页内容嵌入到桌面端应用的，这样就不允许带flash的上传插件了，如：jquery uploadify。。。悲剧
对于Ajax文件上传，大体是有：
1、创建一个input type="file" 的文件上传按钮，根据其id监听绑定其change事件，在事件中用jquery创建一个iframe，嵌入添加隐藏form，同时创建input type="file"，id相同的文件上传按钮，并传入其他需要提交的数据，然后提交，提交完成后移除一个input type="file"，这样用bind或on的绑定就对新的input 框失效，需要重新再绑定一次change事件，以前的jquery是可以使用live函数代替的，现在只能在文件上传成功后再绑定一次change事件。
1 $(function() { 2 uploadFile("fileData",‘cn.ftiao.cm.model.LiveCourse‘,‘‘,"CI"); 3 }); 4 5 function uploadFile(id,classFullName,jsonStrValue,preFileName){ 6 $("#"+id).on("change", function(){ 7 // 上传方法 8 $.ajaxFileUpload({ 9 url:$("#"+id).attr("data-url-upload"), //需要链接到服务器地址 10 secureuri:false, 11 type:"post", 12 fileElementId:id, //文件选择框的id属性 13 dataType: ‘json‘, 14 data:{ 15 "classFullName":classFullName, 16 "jsonStrValue":"", 17 "preFileName":preFileName 18 }, 19 //服务器返回的格式，可以是json 20 success: function (data, status){ //相当于java中try语句块的用法 21 $("#courseIconImg").attr("src",$(".ctx").val()+"/images/img-class.png"); 22 alert("hello"); 23 //先将原有的上传展示清除 24 $("#" + id).nextAll("span").remove(); 25 $("#courseIcon").val(data.outputFileName); 26 // $("#coursewareFile").val(data.outputFileName); 27 var uploadHtml = "<span id=‘"+data.outputPreFileName+"_livelesson_div‘ style=‘color:#FFFFFF;‘>"; 28 uploadHtml += data.fileUploadName ; 29 uploadHtml += "<a name=‘_LIVELESSON_PRIVIEW‘> 预览 </a><a name=‘_LIVELESSON_DEL‘> 删除 </a>"; 30 uploadHtml += "</span>"; 31 // $("#"+id).parents("li").append(uploadHtml); 32 uploadFile("fileData",‘cn.ftiao.cm.model.LiveCourse‘,‘‘,"CI"); 33 }, 34 error: function (data, status, e) //相当于java中catch语句块的用法 35 { 36 alert(e); 37 } 38 }); 39 }); 40 return false; 41 }
2、创建一个 input type="file"的按钮，监听其click事件，然后创建iframe，隐藏form，隐藏form里有个 input type="file"的文件上传框，模拟点击click，弹出文件选择框，选择完文件后上传。此方法在ie下会报 “权限不足” 问题。
下面是ajaxFileUpload 插件
1 jQuery.extend({ 2 3 handleError: function(s, xhr, status, e) { 4 // If a local callback was specified, fire it 5 if (s.error) { 6 s.error.call(s.context || window, xhr, status, e); 7 } 8 9 // Fire the global callback 10 if (s.global) { 11 (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]); 12 } 13 }, 14 createUploadIframe: function(id, uri) 15 { 16 //create frame 17 var frameId = ‘jUploadFrame‘ + id; 18 var iframeHtml = ‘<iframe id="‘ + frameId + ‘" name="‘ + frameId + ‘" style="position:absolute; top:-9999px; left:-9999px"‘; 19 if(window.ActiveXObject) 20 { 21 if(typeof uri== ‘boolean‘){ 22 iframeHtml += ‘ src="‘ + ‘javascript:false‘ + ‘"‘; 23 24 } 25 else if(typeof uri== ‘string‘){ 26 iframeHtml += ‘ src="‘ + uri + ‘"‘; 27 28 } 29 } 30 iframeHtml += ‘ />‘; 31 jQuery(iframeHtml).appendTo(document.body); 32 33 return jQuery(‘#‘ + frameId).get(0); 34 }, 35 createUploadForm: function(id, fileElementId, data) 36 { 37 //create form 38 var formId = ‘jUploadForm‘ + id; 39 var fileId = ‘jUploadFile‘ + id; 40 var form = jQuery(‘<form action="" method="POST" name="‘ + formId + ‘" id="‘ + formId + ‘" enctype="multipart/form-data"></form>‘); 41 if(data) 42 { 43 for(var i in data) 44 { 45 jQuery(‘<input type="hidden" name="‘ + i + ‘" value="‘ + data[i] + ‘" />‘).appendTo(form); 46 } 47 } 48 var oldElement = jQuery(‘#‘ + fileElementId); 49 var newElement = jQuery(oldElement).clone(); 50 jQuery(oldElement).attr(‘id‘, fileId); 51 jQuery(oldElement).before(newElement); 52 jQuery(oldElement).appendTo(form); 53 54 55 56 //set attributes 57 jQuery(form).css(‘position‘, ‘absolute‘); 58 jQuery(form).css(‘top‘, ‘-1200px‘); 59 jQuery(form).css(‘left‘, ‘-1200px‘); 60 jQuery(form).appendTo(‘body‘); 61 return form; 62 }, 63 64 ajaxFileUpload: function(s) { 65 // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout 66 s = jQuery.extend({}, jQuery.ajaxSettings, s); 67 var id = new Date().getTime() 68 var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)==‘undefined‘?false:s.data)); 69 var io = jQuery.createUploadIframe(id, s.secureuri); 70 var frameId = ‘jUploadFrame‘ + id; 71 var formId = ‘jUploadForm‘ + id; 72 // Watch for a new set of requests 73 if ( s.global && ! jQuery.active++ ) 74 { 75 jQuery.event.trigger( "ajaxStart" ); 76 } 77 var requestDone = false; 78 // Create the request object 79 var xml = {} 80 if ( s.global ) 81 jQuery.event.trigger("ajaxSend", [xml, s]); 82 // Wait for a response to come back 83 var uploadCallback = function(isTimeout) 84 { 85 var io = document.getElementById(frameId); 86 try 87 { 88 if(io.contentWindow) 89 { 90 xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null; 91 xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document; 92 93 }else if(io.contentDocument) 94 { 95 xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null; 96 xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document; 97 } 98 }catch(e) 99 { 100 jQuery.handleError(s, xml, null, e); 101 } 102 if ( xml || isTimeout == "timeout") 103 { 104 requestDone = true; 105 var status; 106 try { 107 status = isTimeout != "timeout" ? "success" : "error"; 108 // Make sure that the request was successful or notmodified 109 if ( status != "error" ) 110 { 111 // process the data (runs the xml through httpData regardless of callback) 112 var data = jQuery.uploadHttpData( xml, s.dataType ); 113 // If a local callback was specified, fire it and pass it the data 114 if ( s.success ) 115 s.success( data, status ); 116 117 // Fire the global callback 118 if( s.global ) 119 jQuery.event.trigger( "ajaxSuccess", [xml, s] ); 120 } else 121 jQuery.handleError(s, xml, status); 122 } catch(e) 123 { 124 status = "error"; 125 jQuery.handleError(s, xml, status, e); 126 } 127 128 // The request was completed 129 if( s.global ) 130 jQuery.event.trigger( "ajaxComplete", [xml, s] ); 131 132 // Handle the global AJAX counter 133 if ( s.global && ! --jQuery.active ) 134 jQuery.event.trigger( "ajaxStop" ); 135 136 // Process result 137 if ( s.complete ) 138 s.complete(xml, status); 139 140 jQuery(io).unbind() 141 142 setTimeout(function() 143 { try 144 { 145 jQuery(io).remove(); 146 jQuery(form).remove(); 147 148 } catch(e) 149 { 150 jQuery.handleError(s, xml, null, e); 151 } 152 153 }, 100) 154 155 xml = null 156 157 } 158 } 159 // Timeout checker 160 if ( s.timeout > 0 ) 161 { 162 setTimeout(function(){ 163 // Check to see if the request is still happening 164 if( !requestDone ) uploadCallback( "timeout" ); 165 }, s.timeout); 166 } 167 try 168 { 169 170 var form = jQuery(‘#‘ + formId); 171 jQuery(form).attr(‘action‘, s.url); 172 jQuery(form).attr(‘method‘, ‘POST‘); 173 jQuery(form).attr(‘target‘, frameId); 174 if(form.encoding) 175 { 176 jQuery(form).attr(‘encoding‘, ‘multipart/form-data‘); 177 } 178 else 179 { 180 jQuery(form).attr(‘enctype‘, ‘multipart/form-data‘); 181 } 182 jQuery(form).submit(); 183 184 } catch(e) 185 { 186 jQuery.handleError(s, xml, null, e); 187 } 188 189 jQuery(‘#‘ + frameId).load(uploadCallback ); 190 return {abort: function () {}}; 191 192 }, 193 194 uploadHttpData: function( r, type ) { 195 var data = !type; 196 data = type == "xml" || data ? r.responseXML : r.responseText; 197 // If the type is "script", eval it in global context 198 if ( type == "script" ) 199 jQuery.globalEval( data ); 200 // Get the JavaScript object, if JSON is used. 201 if (type == "json"){ 202 if (data.indexOf("<") >= 0) { 203 data = jQuery.parseJSON(jQuery(data).text()); 204 } 205 else { 206 eval("data = " + data); /*Bug fixed by under */ 207 } 208 } 209 // evaluate scripts within html 210 if ( type == "html" ) 211 jQuery("<div>").html(data).evalScripts(); 212 213 return data; 214 } 215 })
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
