转自:http://blog.sina.com.cn/s/blog_4cdbfecb0100gcls.html
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
//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";
}
}
3.HTML
活动图片: .gif.jpg.png 格式
图片预览:
![]()
解释一下:
IE6,FIREFOX是将图片放在;
里的。
IE7,IE8是放在 里的。
并通过其DISPLAY来实现隐藏显示效果。
为了测试,我装了4次浏览器,也跑到同事的PC上试过了,基本完成功能吧。希望有用处。呵呵。
有疑问的留言吧。