jQuery 關於IE9上傳文件沒法進入後臺問題的緣由及解決辦法（ajaxfileupload.js第四彈）

第四彈的誕生徹底不在本身最初的計劃之中，是有個網友看了先前關於《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這個是一個「」（空字符串），因此這塊能夠直接使用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第三彈） 》