网络编程 
首页 > 网络编程 > 浏览文章

js 上传图片预览问题

(编辑:jimmy 日期: 2025/5/13 浏览:3 次 )
最近也经常遇到浏览器兼容的问题,昨天遇到上传图片预览问题,发现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();

  我把它的路径弹出了看,发现是一串很长的东西,好像是制定的图片类型等等,不过总算是解决了
上一篇:菜鸟javascript基础整理1
下一篇:javascript 二维排序表格代码
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap