jQuery 關於IE9上傳檔案無法進入後台問題的原因及解決辦法（ajaxfileupload.js第四彈）

標籤：style   blog   http   color   io   os   使用   ar   strong   

第四彈的誕生完全不在自己最初的計劃之中，是有個網友看了先前關於《ajaxfileupload.js系列》的文章後提出的問題，由於自己一直是用chrome瀏覽器去測試demo，完全忽略IE瀏覽器（其實是故意的，懶得想瀏覽器安全色的問題，哈哈~），所以當我使用IE9去運行demo的時候，確實發現了同樣的問題，就是ajax非同步提交表單無法進入後台。

下面是解決整個問題的過程，以我在《jQuery 自製上傳頭像外掛程式-附帶Demo執行個體（ajaxfileupload.js第三彈） 》中上傳的demo為基準，這樣會更加容易理解一些。

雖然整個問題的表面現象是ajax非同步提交表單無法進入後台，但是當我在瀏覽器中跟代碼走一遍的時候，發現的首個問題就是下面的提示。

出現這個問題的原因其實要歸罪於

function getFilePath(obj) {    if (obj) {        if (window.navigator.userAgent.indexOf("MSIE") >= 1) {            obj.select();            return document.selection.createRange().text;        }        else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {            if (obj.files) {                return obj.files.item(0).getAsDataURL();            }            return obj.value;        }        return obj.value;    }}

這個函數，最初加這個函數的時候是為了可以相容，不巧，卻弄巧成拙了。

這個函數是從網上直接貼下來的，當時就是怕不同瀏覽器直接用$().val()得不到選擇的檔案名稱。但是當使用IE瀏覽器時，實際上這段代碼返回的document.selection.createRange().text這個是一個“”（Null 字元串），所以這塊可以直接使用obj.value或者無需使用這個方法，直接通過$().val()得到檔案名稱就行。

而令我詫異的是，在IE下使用$().val()居然能得到檔案的完整路徑！！！而不單單只是一個檔案名稱，這樣就不用先上傳再預覽了，可以直接預覽圖片了。

這個問題解決了，重新運行代碼，出現

這個問題的原因是在jQuery-1.4.2外掛程式之後，已經去掉了handleError的方法，而下載了demo的朋友會發現，demo中使用的是jQuery-2.0.3外掛程式。那麼是不是把jQuery外掛程式換一下就行了？不行。因為之所以用jQuery-2.0.3是因為只有在jQuery-1.7版本之後才支援delegate方法，但是我們可以在ajaxfileupload.js外掛程式中加入handleError方法。copy下面代碼到ajaxfileupload.js就可以了

    handleError: function( s, xhr, status, e )         {        // If a local callback was specified, fire it        if ( s.error ) {            s.error.call( s.context || s, xhr, status, e );        }        // Fire the global callback        if ( s.global ) {            (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );        }    }

這個問題解決了，再次重新運行代碼，出現

到這裡實際上就是這篇文章的重點了，開啟瀏覽器跟了一下，就是在

jQuery(form).submit();

這裡拋出了異常。

原因是這樣的，IE出於安全性的考慮，上傳檔案時必須要點擊<input type=’file’>控制項本身才能上傳成功。而因為<input type=’file’>長的實在太醜，很少能滿足我們的審美，我們通常都是會隱藏它，然後用其他的button去觸發它。而這麼做在IE9下是不被允許的。

至於解決方案，如果大家堅持用更加漂亮的上傳控制項，那我覺得用一些css的技巧吧，把<input type=’file’>控制項遮擋下什麼的，這個還是要根據實際情況來定，說來比較噁心，就一個IE9，破壞了其他瀏覽器的和諧，真是叫人抓心撓肝。

對於之前的demo，如果把<input type=’file’>顯示出來，那麼相應的後台也要進行一下修改，主要還是擷取檔案名稱的部分

要將

System.Web.HttpContext.Current.Request.Files[0].FileName

改成

System.IO.Path.GetFileName(System.Web.HttpContext.Current.Request.Files[0].FileName))

因為此時的System.Web.HttpContext.Current.Request.Files[0].FileName是一個完整的檔案路徑，而不單單是一個檔案名稱。

當然，如果我們不想把圖片先save到本地的話，可以直接用圖片路徑去預覽，但是要知道，這個只適合IE呀~~所以，大家自己斟酌。

 

關於這個<input type=’file’>控制項在IE9下能必須要被實際點擊才能上傳的問題，我想一定有其他解決的辦法，希望知道的朋友能夠分享一下。

 

系列分享:

《ASP.NET 使用ajaxfileupload.js外掛程式出現上傳較大檔案失敗的解決方案（ajaxfileupload.js第一彈） 》

《jQuery 關於ajaxfileupload.js外掛程式的逐步解析（ajaxfileupload.js第二彈） 》

《jQuery 自製上傳頭像外掛程式-附帶Demo執行個體（ajaxfileupload.js第三彈） 》

jQuery 關於IE9上傳檔案無法進入後台問題的原因及解決辦法（ajaxfileupload.js第四彈）