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第三弹） 》