[转]IE6,IE7,IE8,FIREFOX 本地图片预览

最新推荐文章于 2021-06-19 10:39:30 发布

iteye_15618

最新推荐文章于 2021-06-19 10:39:30 发布

阅读量112

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： Firefox JavaScript Microsoft CSS 活动 ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_15618/article/details/81899790

学习笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在不同浏览器中实现文件输入后即时预览图片的方法。针对IE6、IE7、IE8及Firefox等浏览器特性，使用CSS与JavaScript进行适配，确保图片预览功能的兼容性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：http://blog.sina.com.cn/s/blog_4cdbfecb0100gcls.html

1.CSS（IE7,IE8用#newPreview）

<style type="text/css">
.initiated_event_photo img{width:400px; height:320px; margin-left:78px; display:none;}
#newPreview{float:left; display:none;width:90%; height:auto; text-align:left; margin:9px 0 0 110px; font-size:14px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);}
</style>

2.JAVASCRIPT

<script type="text/javascript" language="javascript" >

//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
function proimg(){


 if(navigator.userAgent.indexOf("MSIE 6.0")>=1){
  var dateURL = document.getElementById('eventphoto').value;
  var img = document.getElementById('img');
  var photodiv=document.getElementById('event_photo_div');
  img.src = dateURL;
  img.style.display="block";
  photodiv.style.display="block";
}
else if(navigator.userAgent.indexOf("MSIE 7.0")>=1){
 
 var newPreview = document.getElementById("newPreview");
 newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById('eventphoto').value;
 newPreview.style.width = "400px";
 newPreview.style.height = "320px";
 newPreview.style.display="block";
}

else if(window.navigator.userAgent.indexOf("MSIE 8.0")>=1){

   var fileImgpath = document.getElementById('eventphoto');
  fileImgpath.select();
  var fileinfo = document.selection.createRange().text;

  var newPreview = document.getElementById("newPreview");
 newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = fileinfo;
 newPreview.style.width = "400px";
 newPreview.style.height = "320px";
 newPreview.style.display="block";
}

else if(navigator.userAgent.indexOf("Firefox")>0){
 //firefox 将路径加密了,当然她自己可以解密,只需要读写就可以了
  var dateURL = document.getElementById('eventphoto').files.item(0).getAsDataURL();
  var img = document.getElementById('img');
  var photodiv=document.getElementById('event_photo_div');
  img.src = dateURL;
  img.style.display="block";
  photodiv.style.display="block";
}
}
</script>

3.HTML

<div class="initiated_event_list">活动图片：&nbsp;&nbsp;<input class="initiated_txt_format" type="file" name="eventphoto" id="eventphoto" onchange="javascript:proimg();" ContentEditable="false"/>&nbsp;&nbsp;<font color="#42A2CF" size="-1"> .gif.jpg.png 格式</font></div>
<div class="initiated_event_photo" id="event_photo_div">图片预览：&nbsp;&nbsp;<img id="img"/></div>
<div id="newPreview"></div>

解释一下：

IE6,FIREFOX是将图片放在;<img id="img"/>里的。

IE7,IE8是放在 <div id="newPreview"></div>里的。

并通过其DISPLAY来实现隐藏显示效果。

为了测试，我装了4次浏览器，也跑到同事的PC上试过了，基本完成功能吧。希望有用处。呵呵。

有疑问的留言吧。