上传图片预览问题

  我们写网页的时候一般的用IE进行开发,一般的人都是按照IE进行些程序,做网站的时候遇到浏览器兼容问题是非常烦躁的事情。最近也经常遇到浏览器兼容的问题,昨天遇到上传图片预览问题,发现IE8和火狐不能显示,弄了很久,早上终于解决了很高兴。故跟大家分享下,我也多是网上找的,自己总结的一下,希望对大家有点帮助。

  我们一般根据IE6、IE7进行开发的时候写图片预览的代码是:

 

 document.getElementById( " img " ).src  =  document.getElementById( " file " ).value;

 

  还有一种方式

 

代码
< div  style ="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale); width:300px; height:300px;"  id ="div1" ></ div >
<script type="javascript">
 document.getElementById("div1").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("file").value;
</script>

 

   IE8

  在IE8和火狐上直接用户控件.value得到的只是文件名称而不是完整路径

var isIE = (document.all) ? true : false;

            var isIE7 = isIE && (navigator.userAgent.indexOf('MSIE 7.0') != -1);

            var isIE8 = isIE && (navigator.userAgent.indexOf('MSIE 8.0') != -1);

 

            var file = document.getElementById("file");

            if (isIE7 || isIE8) {

                file.select();

                img = document.selection.createRange().text;

                document.selection.empty();

                document.getElementById("img").src = img;

            }

 

  火狐

  在火狐上问题很多,在网上找了很多东西都无法实现,首先要获得

  在火狐上问题很多,在网上找了很多东西都无法实现。
  1。首先要获得上传问题的完整路径,用下面的方法是可以得完整路径

  if (navigator.userAgent.indexOf("Firefox") != -1) {

     try {netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");

                } catch (e) {

                }

                img = document.getElementById("file").value;

  }

  2。但直接这样给图片修改路径(src)没有反应,后来发现有人说要在火狐显示本地图片要在前面加"file:///"

      if (!document.all) {

                    img = img.replace(/\\/g, "/");

                    img = "file:///" + img

                }

  这样如果是页面上放个图片是可以显示,不过前提条件是不能放在IIS上,我的网站是部署在IIS上的这样就算我直接放个图片地址是本地图片也显示不了,所有我有本郁闷到了,而且很多人都说火狐有安全设置不能预览本地图片,我差点就放弃了。

  最后在网上在到一个可以预览的例子,仔细分析发现原来要在火狐上实现预览图片其实代码也很简单:

  document.getElementById("img").src = document.getElementById("file").files[0].getAsDataURL();

  我把它的路径弹出了看,发现是一串很长的东西,好像是制定的图片类型等等,不过总算是解决了

  

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值