第一步：html中引入jQuery-1.7.1.js和ajaxFileUpload.js
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>企业年金数据校验平台</title> 5 <link href="css/index.css" rel="stylesheet" type="text/css" /> 6 </head> 7 <body> 8 <div class="container"> 9 <div class="head"> 10 <div class="user-nav"> 11 <div class="user-info"> 12 <span id="username"></span><span class="logout can-click">退出</span> 13 </div> 14 </div> 15 <div class="nav-title"> 16 <span>企业年金数据校验平台</span> 17 </div> 18 <!-- <div class="nav-attention"> 19 <img alt="light" src="images/atten_light.gif" class="atten-light" /> 20 <span class="">重要提醒:</span> <span>XXXXXXXXXXX</span> 21 </div>--> 22 </div> 23 <div class="main"> 24 <div class="main-nav"> 25 26 </div> 27 <div class="main-top"> 28 <div class="main-tl"> 29 <div class="exl-submit"> 30 <span class="exl-submit-til">Excel上传</span> <a class="btn-upload exl-submit-can" 31 id="btn-upload" href="#"> 32 <input type="file" id="excel_upload" name="file" /> 33 </a> 34 </div> 35 </div> 36 <div class="main-tr"> 37 </div> 38 </div> 39 <div class="main-mid"> 40 </div> 41 <div class="main-bottom"> 42 <div id="loading_info" class="loading-info"> 43 </div> 44 <div id="execute_result" class="execute-result"> 45 <div id="result-step-two" class="result-wrap"> 46 <div class="result-left"></div> 47 <div class="result-right"></div> 48 </div> 49 <div id="result-step-three" class="result-wrap"> 50 </div> 51 <div id="result-step-four" class="result-wrap"> 52 </div> 53 54 </div> 55 </div> 56 </div> 57 </div> 58 </body> 59 <script src="http://xxx.xxx.xxx.xxx/commonScript/jquery/jquery-1.7.1.min.js" type="text/javascript"></script> 60 <script src="http://xxx.xxx.xxx.xxx/commonScript/format.js" type="text/javascript"></script> 61 <script src="js/ajaxfileupload.js" type="text/javascript"></script> 62 <script src="js/tools.js" type="text/javascript"></script> 63 <script src="js/index.js" type="text/javascript"></script> 64 </html>
第二步：ajaxFileUpload.js代码
1 jQuery.extend({ 2 handleError: function (s, xhr, status, e) { 3 // If a local callback was specified, fire it 4 if (s.error) { 5 s.error.call(s.context || s, xhr, status, e); 6 } 7 8 // Fire the global callback 9 if (s.global) { 10 (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]); 11 } 12 }, 13 createUploadIframe: function (id, uri) { 14 15 var frameId = 'jUploadFrame' + id; 16 17 if (window.ActiveXObject) { 18 if (jQuery.browser.version == "9.0") { 19 io = document.createElement('iframe'); 20 io.id = frameId; 21 io.name = frameId; 22 } 23 else if (jQuery.browser.version == "6.0" || jQuery.browser.version == "7.0" || jQuery.browser.version == "8.0") { 24 25 var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />'); 26 if (typeof uri == 'boolean') { 27 io.src = 'javascript:false'; 28 } 29 else if (typeof uri == 'string') { 30 io.src = uri; 31 } 32 } 33 } 34 else { 35 var io = document.createElement('iframe'); 36 io.id = frameId; 37 io.name = frameId; 38 } 39 io.style.position = 'absolute'; 40 io.style.top = '-1000px'; 41 io.style.left = '-1000px'; 42 43 document.body.appendChild(io); 44 45 return io; 46 }, 47 ajaxUpload: function (s, xml) { 48 //if((fromFiles.nodeType&&!((fileList=fromFiles.files)&&fileList[0].name))) 49 50 var uid = new Date().getTime(), idIO = 'jUploadFrame' + uid, _this = this; 51 var jIO = $('<iframe name="' + idIO + '" id="' + idIO + '" style="display:none">').appendTo('body'); 52 var jForm = $('<form action="' + s.url + '" target="' + idIO + '" method="post" enctype="multipart/form-data" style="display:none"></form>').appendTo('body'); 53 var oldElement = $('#' + s.fileElementId); 54 var newElement = $(oldElement).clone(); 55 $(oldElement).attr('id', 'jUploadFile' + uid); 56 $(oldElement).before(newElement); 57 $(oldElement).appendTo(jForm); 58 59 this.remove = function () { 60 if (_this !== null) { 61 jNewFile.before(jOldFile).remove(); 62 jIO.remove(); jForm.remove(); 63 _this = null; 64 } 65 } 66 this.onLoad = function () { 67 68 var data = $(jIO[0].contentWindow.document.body).text(); 69 70 try { 71 72 if (data != undefined) { 73 data = eval('(' + data + ')'); 74 try { 75 76 if (s.success) 77 s.success(data, status); 78 79 // Fire the global callback 80 if (s.global) 81 jQuery.event.trigger("ajaxSuccess", [xml, s]); 82 if (s.complete) 83 s.complete(data, status); 84 xml = null; 85 } catch (e) { 86 87 status = "error"; 88 jQuery.handleError(s, xml, status, e); 89 } 90 91 // The request was completed 92 if (s.global) 93 jQuery.event.trigger("ajaxComplete", [xml, s]); 94 // Handle the global AJAX counter 95 if (s.global && ! --jQuery.active) 96 jQuery.event.trigger("ajaxStop"); 97 98 // Process result 99 100 } 101 } catch (ex) { 102 alert(ex.message); 103 }; 104 } 105 this.start = function () { jForm.submit(); jIO.load(_this.onLoad); }; 106 return this; 107 108 }, 109 createUploadForm: function (id, url, fileElementId, data) { 110 //create form 111 var formId = 'jUploadForm' + id; 112 var fileId = 'jUploadFile' + id; 113 var form = jQuery('<form action="' + url + '" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); 114 if (data) { 115 for (var i in data) { 116 jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); 117 } 118 } 119 120 var oldElement = jQuery('#' + fileElementId); 121 var newElement = jQuery(oldElement).clone(); 122 jQuery(oldElement).attr('id', fileId); 123 jQuery(oldElement).before(newElement); 124 jQuery(oldElement).appendTo(form); 125 126 //set attributes 127 jQuery(form).css('position', 'absolute'); 128 jQuery(form).css('top', '-1200px'); 129 jQuery(form).css('left', '-1200px'); 130 jQuery(form).appendTo('body'); 131 return form; 132 }, 133 ajaxFileUpload: function (s) { 134 // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout 135 // Create the request object 136 var xml = {}; 137 s = jQuery.extend({}, jQuery.ajaxSettings, s); 138 if (window.ActiveXObject) { 139 var upload = new jQuery.ajaxUpload(s, xml); 140 upload.start(); 141 142 } else { 143 var id = new Date().getTime(); 144 var form = jQuery.createUploadForm(id, s.url, s.fileElementId, (typeof (s.data) == 'undefined' ? false : s.data)); 145 var io = jQuery.createUploadIframe(id, s.secureuri); 146 var frameId = 'jUploadFrame' + id; 147 var formId = 'jUploadForm' + id; 148 // Watch for a new set of requests 149 if (s.global && !jQuery.active++) { 150 jQuery.event.trigger("ajaxStart"); 151 } 152 var requestDone = false; 153 154 if (s.global) 155 jQuery.event.trigger("ajaxSend", [xml, s]); 156 // Wait for a response to come back 157 var uploadCallback = function (isTimeout) { 158 var io = document.getElementById(frameId); 159 160 try { 161 if (io.contentWindow) { 162 xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null; 163 xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document; 164 165 } else if (io.contentDocument) { 166 xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null; 167 xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document; 168 } 169 } catch (e) { 170 jQuery.handleError(s, xml, null, e); 171 } 172 if (xml || isTimeout == "timeout") { 173 requestDone = true; 174 var status; 175 try { 176 status = isTimeout != "timeout" ? "success" : "error"; 177 // Make sure that the request was successful or notmodified 178 if (status != "error") { 179 // process the data (runs the xml through httpData regardless of callback) 180 var data = jQuery.uploadHttpData(xml, s.dataType); 181 // If a local callback was specified, fire it and pass it the data 182 183 if (s.success) 184 s.success(data, status); 185 186 // Fire the global callback 187 if (s.global) 188 jQuery.event.trigger("ajaxSuccess", [xml, s]); 189 if (s.complete) 190 s.complete(data, status); 191 192 } else 193 jQuery.handleError(s, xml, status); 194 } catch (e) { 195 status = "error"; 196 jQuery.handleError(s, xml, status, e); 197 } 198 199 // The request was completed 200 if (s.global) 201 jQuery.event.trigger("ajaxComplete", [xml, s]); 202 // Handle the global AJAX counter 203 if (s.global && ! --jQuery.active) 204 jQuery.event.trigger("ajaxStop"); 205 206 // Process result 207 jQuery(io).unbind(); 208 209 setTimeout(function () { 210 try { 211 jQuery(io).remove(); 212 jQuery(form).remove(); 213 214 } catch (e) { 215 jQuery.handleError(s, xml, null, e); 216 } 217 218 }, 100); 219 220 xml = null; 221 222 } 223 }; 224 // Timeout checker 225 if (s.timeout > 0) { 226 setTimeout(function () { 227 // Check to see if the request is still happening 228 if (!requestDone) uploadCallback("timeout"); 229 }, s.timeout); 230 } 231 232 try { 233 234 var form = jQuery('#' + formId); 235 jQuery(form).attr('action', s.url); 236 jQuery(form).attr('method', 'POST'); 237 jQuery(form).attr('target', frameId); 238 239 if (form.encoding) { 240 jQuery(form).attr('encoding', 'multipart/form-data'); 241 } 242 else { 243 jQuery(form).attr('enctype', 'multipart/form-data'); 244 } 245 246 247 jQuery(form).submit(); 248 249 } catch (e) { 250 jQuery.handleError(s, xml, null, e); 251 } 252 253 jQuery('#' + frameId).load(uploadCallback); 254 return { abort: function () { } }; 255 256 } 257 }, 258 259 uploadHttpData: function (r, type) { 260 261 var data = !type; 262 data = type == "xml" || data ? r.responseXML : r.responseText; 263 // If the type is "script", eval it in global context 264 if (type == "script") 265 jQuery.globalEval(data); 266 // Get the JavaScript object, if JSON is used. 267 if (type == "json") { 268 269 //eval("data = " + $(data).html());//默认方式，在ie下不好使 270 //data = jQuery.parseJSON(jQuery(data).text());//第一次修改后，ie7、8、9、10可用，ie11不可用 271 try { 272 data = jQuery.parseJSON(data); //第二次修改，ie全兼容 273 } catch (e) { 274 data = jQuery.parseJSON(jQuery(data).text()); 275 } 276 277 } 278 // evaluate scripts within html 279 if (type == "html") 280 jQuery("<div>").html(data).evalScripts(); 281 282 return data; 283 } 284 });
第三步：index.js代码
1 function fnExcelUpload(event) { 2 /// <summary>上传Excel</summary> 3 /// <param name="event" type="Object">file对象</param> 4 fnPushMainTr(); 5 6 $.ajaxFileUpload({ 7 url: "Service.ashx?Type=Upload", 8 secureuri: false, // 一般设置为false 9 fileElementId: "excel_upload", // 文件上传表单的id <input type="file" id="fileUpload" name="file" /> 10 dataType: 'json', // 返回值类型 一般设置为json 11 success: function (data) { 12 if (!data || data.reuslt == 'error' || data.result == 'warning') { 13 fnErrorMsg(data); 14 return; 15 } 16 //设置上传Excel按钮样式 17 $('#btn-upload').removeClass('exl-submit-can').addClass('exl-submit-no').children('input').attr('disabled', true); 18 //设置第一步的样式，并增加文字提示“完成” 19 $('#step_one').removeClass('step-one-a').addClass('step-one-b').siblings('p:last').addClass('fc-green').children('span').text('完成') 20 .parents('li').addClass('fc-green'); 21 $('#loading_info').html('<span class="progress">Excel格式校验进行中</span>'); 22 setTimeout(function () { 23 fnGetState(); 24 }, 1000); 25 26 }, 27 error: function (data)// 服务器响应失败处理函数 28 { 29 console.log("服务器异常"); 30 } 31 }); 32 }
注：使用ajaxFileUpload.js上传excel文件时，在ie9以上会弹出下载窗口，ie7/8会报错缺少“)”，这是因为服务端返回的数据是json，ie无法解析导致的，
如果之前是application/json的话就会弹出下载窗口，需要将服务器响应头修改为：Content-Type:text/html;charset=UTF-8即可