javascript代码实例教程-jQuery 关于IE9上传文件无法进入后台问题的原因及解决办法(ajaxfileupload.js第四弹)

发布时间:2019-01-25 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery 关于IE9上传文件无法进入后台问题的原因及解决办法(ajaxfileupload.js第四弹)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 出现这个问题的原因其实要归罪于

 

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呀~~所以,大家自己斟酌。

 

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery 关于IE9上传文件无法进入后台问题的原因及解决办法(ajaxfileupload.js第四弹)全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery 关于IE9上传文件无法进入后台问题的原因及解决办法(ajaxfileupload.js第四弹)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。