注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

古城风~~~

竹密无妨溪水过,天高不碍白云飞。这天下总有一份是属于我古城的天地!

 
 
 

日志

 
 

IE6,IE7,IE8,FIREFOX 本地图片预览  

2010-10-31 10:55:57|  分类: 网页特效/javascr |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

1.CSS(IE7,IE8用#newPreview)

.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);}

 

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.getElementByIdx('eventphoto').value;
   var img = document.getElementByIdx('img');
   var photodiv=document.getElementByIdx('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.getElementByIdx("newPreview");
  newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementByIdx('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.getElementByIdx('eventphoto');
   fileImgpath.select();
   var fileinfo = document.selection.createRange().text;

  var newPreview = document.getElementByIdx("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.getElementByIdx('eventphoto').files.item(0).getAsDataURL();
   var img = document.getElementByIdx('img');
   var photodiv=document.getElementByIdx('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来实现隐藏显示效果。

 

上面的document.getElementByIdx应该改为document.getElementById。。

 

 

本文来源于网络

扩展阅读,JavaScript 图片上传预览效果

  评论这张
 
阅读(422)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017