jQuery 關於IE9上傳文件無法進入後臺原因及解決辦法(ajaxfileupload.js第四彈)

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

下面是解決整個問題的過程,以我在《jQuery 自制上傳頭像插件-附帶Demo實例(ajaxfileupload.js第三彈) 》中上傳的demo爲基準,這樣會更加容易理解一些。

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

wKioL1QRRaDCF4HIAAG1HiUWTJs549.jpg

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

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()居然能得到文件的完整路徑!!!而不單單只是一個文件名,這樣就不用先上傳再預覽了,可以直接預覽圖片了。

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

wKiom1QRRarCtEF3AAJrzUV9CzE122.jpg

這個問題的原因是在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] );
        }
    }

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

wKiom1QRRdPAdMFWAAHI3vwv0ZQ123.jpg

到這裏實際上就是這篇文章的重點了,打開瀏覽器跟了一下,就是在

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是一個完整的文件路徑,而不單單是一個文件名。

wKiom1QRRi-ikEYeAAH3evE9jxs376.jpg

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

 

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

 

系列分享:

ASP.NET 使用js插件出現上傳較大文件失敗的解決方法(ajaxfileupload.js第一彈)

jQuery 關於ajaxfileupload.js插件的逐步解析(ajaxfileupload.js第二彈)

jQuery 自制上傳頭像插件-附帶Demo實例(ajaxfileupload.js第三彈)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章