這段代碼來自我的提問以及后來的回答。
https://segmentfault.com/q/1010000009635544

先給出此問題相關(guān)的代碼:下面的代碼，我已經(jīng)成功兼容了IE9+,但是沒能成功兼容IE8

先給出此問題相關(guān)的代碼:
下面的代碼，我已經(jīng)成功兼容了IE9+,但是沒能成功IE8，

這段的代碼不需要關(guān)注。

$("#file-upload").fileupload({ url: "/api/org/importOrg",add: function(e, data) {var file = data.files[0];$("#fileInput").val(file.name);$("#importSuccess").unbind().bind('click', function() {if ($("#fileInput").val() === "") {Messenger().post({message: "請先上傳文件！",type: 'info',showCloseButton: true});return;}if (browser == "Microsoft Internet Explorer" && (trim_Version == "MSIE7.0" )) {Messenger().post({message: '瀏覽器版本過老，不支持導(dǎo)入功能',type: 'info',showCloseButton: true});return;} else if (!/.xls$|.xlsx$/.test(file.name)) {Messenger().post({message: '請上傳以.xls/.xlsx為后綴名的正確Excel模版文件',type: 'info',showCloseButton: true});return;} else if (file.size >= 10485760) {//上傳文件大小不能超過10MbMessenger().post({message: '上傳的文件大小不能超過10Mb',type: 'info',showCloseButton: true});return;}$('#importSuccess').showLoading({'overlayWidth': $('#importSuccess').innerWidth(),'overlayHeight': $('#importSuccess').innerHeight()});//var pNode = pNodeSelectTree.getId();//$("#file-upload").fileupload({formData: {name: $("#fileInput").val(), //type:$("[name=userType]:checked").val() }});$("#file-upload").fileupload({formData: {name: $("#fileInput").val()}});console.log('before submit:'+ $("#fileInput").val());//before submit:組織導(dǎo)入模板.xls//$("#file-upload").fileupload({url:"/api/org/"+pNode[0]+"/importOrg"});data.submit();console.log("after submit");//after submit});},done: function(e, rep) {console.log("done");//沒有觸發(fā)fail，沒觸發(fā)done回掉var myResult=JSON.parse(rep.result);//后端返回字符串，解析成JSON對象，請求的content-type應(yīng)該為text/plain,避免IE9下返回application/json提示下載，從而兼容IE9// myResult={"failed":1,"succeed":10,"fails":[{"line":15,"name":"的薩芬","orgName":"組織","mobile":1352222222,"error":"出錯(cuò)啦!!!"},{"line":15,"name":"的薩芬","orgName":"組織","mobile":1352222222,"error":"出錯(cuò)啦!!!"},{"line":15,"name":"的薩芬","orgName":"組織","mobile":1352222222,"error":"出錯(cuò)啦!!!"}]};$('#importSuccess').hideLoading();$("#fileInput").val('');if (myResult.failed == 0) {new Modal({icon: "success",title: "導(dǎo)入成功",content: "成功導(dǎo)入" + myResult.succeed + "條數(shù)據(jù)",isConfirm: false}).show(function() {});} else {$('#importErrorModal').html(importErrorModal(myResult));new Modal('#importErrorModal').show();$('#importErrorModal td>div').each(function(){this.scrollWidth > this.offsetWidth && $(this).tooltip();});$('#importErrorModal .modal-header').moveAnimate({modalHeaders:'#importErrorModal .modal-header'});}},fail: function() {console.log("fail");//沒有打印，也就是說沒回調(diào)fail$('#importSuccess').hideLoading();$("#fileInput").val('');}});

我遇到的問題不是所謂的返回JSON數(shù)據(jù)，IE瀏覽器提示下載的問題，這個(gè)問題我已經(jīng)解決了。
現(xiàn)在的問題是，在IE8下，此段程序無法回調(diào)done和fail函數(shù)，但是在IE9+瀏覽器和其他主流瀏覽器中是可行的。

console.log('before submit:'+ $("#fileInput").val());//before submit:組織導(dǎo)入模板.xls//$("#file-upload").fileupload({url:"/api/org/"+pNode[0]+"/importOrg"});data.submit();console.log("after submit");//after submit

根據(jù)上面那段程序的打印結(jié)果，說明add函數(shù)是成功執(zhí)行的。
我也監(jiān)控了network的通信，只有l(wèi)oading.gif這個(gè)表明正在加載的通信，沒有其他相關(guān)的請求&&回復(fù)。

這也佐證了done和fail函數(shù)沒有被回調(diào)，那么問題是什么呢？

我的回答：

IE9的兼容問題我已經(jīng)在昨天嘗試了一天被我解決，但是之后IE8的兼容問題一直沒有被解決，雖然我也花了近一天的時(shí)間，在stack overflow上搜索相關(guān)問題，但是沒有什么收獲。

我是題主。我在這個(gè)問題上花了兩個(gè)白天的時(shí)間，終于解決了這個(gè)問題。
之所以能解決這個(gè)問題，是因?yàn)槲抑匦聶z查了前人寫的代碼邏輯。這個(gè)問題其實(shí)和HTML代碼緊密相關(guān)，我之前只注意JS代碼。
- HTML代碼

<button class="btn btn-icon btn-blue" style="width:90px;height:32px" onclick="$(this).next().click()"><span class="icon-zcy icon-shangchuan mr" style="height:20px"></span>上傳 </button> <input type="file" name="files" style="display:none" class="btn-upload" id="file-upload" >

我們可以看到，這個(gè)其實(shí)是通過click觸發(fā)click。
這個(gè)是很常見的手法，因?yàn)楹茈y看，也不好定制（至少我不知道如何定制它的CSS）。所以通過隱藏input，通過button調(diào)用input成為大多數(shù)人的選擇。
但是IE8出于安全性，不允許這么做，所以input看似被調(diào)用，但是沒有獲取到data, 下面這段英文來自微軟關(guān)于IE的文檔：

IE doesn’t allow manipulation of the type=”file” input element from javascript due to security reasons. Setting the filename or invoking a click event to show the browser dialog will result in an “Access is denied” error on the form submit.

這樣如何保證安全性，我就不知道了。

所以為了避免這個(gè)限制,對HTML代碼進(jìn)行改動：看似在點(diǎn)擊button,實(shí)則在點(diǎn)擊
input

<div class="uploadFile"><input type="text" class="input input-medium" id="fileInput"> <span><a href="javascript:void(0)" class="btn btn-icon btn-blue" > <span class="icon-zcy icon-shangchuan mr" style="height:20px"></span>上傳</a><input type="file" name="files" class="btn-upload" id="file-upload" ></span> </div>

SASS

.uploadFile{span{position: relative;display: inline-block;}#file-upload { // 設(shè)置占據(jù)空間為0，看似點(diǎn)擊button,實(shí)則在點(diǎn)擊file-upload,從而避開IE8處于安全限制禁止間接點(diǎn)擊input type=file的bugposition: absolute;width: 100%;height: 100%;//和父元素同高寬top: 0;right: 0;opacity: 0;filter: alpha(opacity=0);}//解決此bug的方法詳見http://wenzhixin.net.cn/2014/07/30/ie8_file_problem}

這是我看了這篇博客：http://wenzhixin.net.cn/2014/07/30/ie8_file_problem 后所做的嘗試，然后works

我的感想：通過調(diào)試確定問題的根源，再根據(jù)問題在谷歌上搜答案。

總結(jié)

以上是生活随笔為你收集整理的jQuery-File-Upload兼容IE8的问题：data.submit()没有发送请求的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。