jQuery關(guān)于IE9上傳文件無法進(jìn)入后臺(tái)原因及解決辦法（ajaxfileupload.js第四彈）

第四彈的誕生完全不在自己最初的計(jì)劃之中，是有個(gè)網(wǎng)友看了先前關(guān)于《ajaxfileupload.js系列》的文章后提出的問題，由于自己一直是用chrome瀏覽器去測試demo，完全忽略IE瀏覽器（其實(shí)是故意的，懶得想瀏覽器兼容的問題，哈哈~），所以當(dāng)我使用IE9去運(yùn)行demo的時(shí)候，確實(shí)發(fā)現(xiàn)了同樣的問題，就是ajax異步提交表單無法進(jìn)入后臺(tái)。

十年專注成都網(wǎng)站制作，成都企業(yè)網(wǎng)站建設(shè)，個(gè)人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識(shí)、方案，網(wǎng)站設(shè)計(jì)流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù),專注于成都企業(yè)網(wǎng)站建設(shè),高端網(wǎng)頁制作,對(duì)成都PVC花箱等多個(gè)方面，擁有豐富設(shè)計(jì)經(jīng)驗(yàn)。

下面是解決整個(gè)問題的過程，以我在《jQuery 自制上傳頭像插件-附帶Demo實(shí)例（ajaxfileupload.js第三彈） 》中上傳的demo為基準(zhǔn)，這樣會(huì)更加容易理解一些。

雖然整個(gè)問題的表面現(xiàn)象是ajax異步提交表單無法進(jìn)入后臺(tái)，但是當(dāng)我在瀏覽器中跟代碼走一遍的時(shí)候，發(fā)現(xiàn)的首個(gè)問題就是下面的提示。

出現(xiàn)這個(gè)問題的原因其實(shí)要?dú)w罪于

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;
    }
}

這個(gè)函數(shù)，最初加這個(gè)函數(shù)的時(shí)候是為了可以兼容，不巧，卻弄巧成拙了。

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

而令我詫異的是，在IE下使用$().val()居然能得到文件的完整路徑?。。《粏螁沃皇且粋€(gè)文件名，這樣就不用先上傳再預(yù)覽了，可以直接預(yù)覽圖片了。

這個(gè)問題解決了，重新運(yùn)行代碼，出現(xiàn)

這個(gè)問題的原因是在jQuery-1.4.2插件之后，已經(jīng)去掉了handleError的方法，而下載了demo的朋友會(huì)發(fā)現(xiàn)，demo中使用的是jQuery-2.0.3插件。那么是不是把jQuery插件換一下就行了？不行。因?yàn)橹杂胘Query-2.0.3是因?yàn)橹挥性趈Query-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] );
        }
    }

這個(gè)問題解決了，再次重新運(yùn)行代碼，出現(xiàn)

到這里實(shí)際上就是這篇文章的重點(diǎn)了，打開瀏覽器跟了一下，就是在

jQuery(form).submit();

這里拋出了異常。

原因是這樣的，IE出于安全性的考慮，上傳文件時(shí)必須要點(diǎn)擊控件本身才能上傳成功。而因?yàn)?input type=’file’>長的實(shí)在太丑，很少能滿足我們的審美，我們通常都是會(huì)隱藏它，然后用其他的button去觸發(fā)它。而這么做在IE9下是不被允許的。

至于解決方法，如果大家堅(jiān)持用更加漂亮的上傳控件，那我覺得用一些css的技巧吧，把控件遮擋下什么的，這個(gè)還是要根據(jù)實(shí)際情況來定，說來比較惡心，就一個(gè)IE9，破壞了其他瀏覽器的和諧，真是叫人抓心撓肝。

對(duì)于之前的demo，如果把顯示出來，那么相應(yīng)的后臺(tái)也要進(jìn)行一下修改，主要還是獲取文件名的部分

要將

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

改成

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

因?yàn)榇藭r(shí)的System.Web.HttpContext.Current.Request.Files[0].FileName是一個(gè)完整的文件路徑，而不單單是一個(gè)文件名。

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

 

關(guān)于這個(gè)控件在IE9下能必須要被實(shí)際點(diǎn)擊才能上傳的問題，我想一定有其他解決的辦法，希望知道的朋友能夠分享一下。

 

系列分享:

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

《jQuery 關(guān)于ajaxfileupload.js插件的逐步解析（ajaxfileupload.js第二彈） 》

《jQuery 自制上傳頭像插件-附帶Demo實(shí)例（ajaxfileupload.js第三彈） 》

分享名稱：jQuery關(guān)于IE9上傳文件無法進(jìn)入后臺(tái)原因及解決辦法（ajaxfileupload.js第四彈）
鏈接分享：http://m.jiaotiyi.com/article/jicsdc.html