<html>
<head>
<style type="text/css">
#preview_wrapper
{
display: inline-block;
width: 300px;
height: 300px;
background-color: #CCC;
}
#preview_fake
{
/* 该对象用户在IE下显示预览图片 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#preview_size_fake
{
/* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
visibility: hidden;
}
#preview
{
/* 该对象用户在FF下显示预览图片 */
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript">
function onUploadImgChange(sender)
{
if (!sender.value.match(/.jpg|.gif|.png|.bmp/i)) //忽略大小写
{
alert('图片格式无效！');
return false;
}
var objPreview = document.getElementById('preview');
var objPreviewFake = document.getElementById('preview_fake');
var objPreviewSizeFake = document.getElementById('preview_size_fake');
if (sender.files && sender.files[0])
{
objPreview.style.display = 'block';
objPreview.style.width = 'auto';
objPreview.style.height = 'auto';
// Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
objPreview.src = sender.files[0].getAsDataURL();
}
else if (objPreviewFake.filters)
{
// IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
//（相同环境有时能显示，有时不显示），因此只能用滤镜来解决
// IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
sender.select();
var imgSrc = document.selection.createRange().text;
objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
autoSizePreview(objPreviewFake, objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight);
objPreview.style.display = 'none';
}
}
function onPreviewLoad(sender)
{
autoSizePreview(sender, sender.offsetWidth, sender.offsetHeight);
}
function autoSizePreview(objPre, originalWidth, originalHeight)
{
var zoomParam = clacImgZoomParam(300, 300, originalWidth, originalHeight);
objPre.style.width = zoomParam.width + 'px';
objPre.style.height = zoomParam.height + 'px';
objPre.style.marginTop = zoomParam.top + 'px';
objPre.style.marginLeft = zoomParam.left + 'px';
}
function clacImgZoomParam(maxWidth, maxHeight, width, height)
{
var param = { width: 300, height: 300, top: 0, left: 0 };
if (width > maxWidth || height > maxHeight)
{
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if (rateWidth > rateHeight)
{
param.width = maxWidth;
param.height = height / rateWidth;
}
else
{
param.width = width / rateHeight;
param.height = maxHeight;
}
}
param.left = (maxWidth - param.width) / 2;
param.top = (maxHeight - param.height) / 2;
return param;
}
</script>
</head>
<body>
<table>
<TR bgcolor="#FFFFFF">
<TD align="right" width="100">图片位置:</TD>
<td>
<div id="preview_wrapper">
<div id="preview_fake">
<img id="preview" onload="onPreviewLoad(this)" />
</div>
</div>
<input type="file" name="formFile"
onchange="onUploadImgChange(this)" /><font color=red>*</font>
<img id="preview_size_fake" />
<span id="swh"></span></td>
<td>
<div id="newPreview"></div>
</td>
<td> </td>
</TR>
</table>
</body>
</html>
- 大小: 31.4 KB
分享到：
相关推荐
ie6 ie7 ff浏览器兼容 border:2px solid #00f; /*IE、ff的属性*/ border:2px solid #090\9; /* IE6/7/8的属性 */ border:2px solid #F90\0; /* IE8支持 */ *border:2px solid #F00; /* IE6、7支持 */ _border:2...
CSS样式兼容IE6、IE7、IE8、FF火狐浏览器的方法
在ie6 ie7 ie8 ff浏览器下显示不同的效果，测试的时候很好用哦。
JS图片预览(兼容IE6、IE7、IE8和FF)
省市县选择器，支持 ie6/7/8 和火狐
图片等比例缩放个人最优化版(IE6,IE7,FF)
CSS兼容IE6,IE7和FF的总结 . 区别IE6与FF： background:orange;*background:blue; 区别IE6与IE7： background:green !important;background:blue; 区别IE7与FF： background:orange; *background:green; ...
NULL 博文链接：https://huanyq2008.iteye.com/blog/889791
图片模糊化，支持FF/IE6以上，onMouseOver事件可以使图片模糊，onMouseout变清晰。
CSS完美兼容IE6IE7FF的通用方法
CSS完美兼容IE6_IE7_FF的通用方法
光标处插入,兼容IE系列,FF等,适用于编辑器,浏览插入表情 //网上没有真正兼容IE和FF的代码,只是做到一种; //代码为本人对IE和FF光标插入支持整合修改;
搜集整理的CSS HACK，也即是在多种浏览器（主要是ie6 ie7 ie8 ff)下样式统一的解决办法。 内容还是较全的，前台开发中常见的兼容性问题都可以找到解决方法，值得研究。 包括各浏览器CSS hack,技巧。有实例。
ie6_ie7_ie8_ff主流浏览器的兼容性
DIV+css兼容性FFIE6IE7IE8IE9[借鉴].pdf
讲述多浏览器兼容。包括ie6 ie7 ie8 FF 谷歌浏览器 等。一切ie核心等等。对于网页设计师来说 必备不可！
前端设计IE6IE7IE8IE9FF问题汇总IE和FirFox兼容问题[参照].pdf
浏览器兼容CSS ,IE6.IE7,FF
图片预览(支持IE7)使用CSS滤镜,但是不兼容FF