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

转自：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上试过了，基本完成功能吧。希望有用处。呵呵。

有疑问的留言吧。