上传图片预览功能的IE浏览器兼容性问题的实现：JS+JQuery+CSS完整版
上传图片预览功能的实现：JS+JQuery+CSS完整版
温馨提示：项目中如果需要上传图片，强烈建议通过后台程序（比如java）对图片进行相关控制和操作！！！
前言：上传图片，最令人头痛的，不是功能的实现，而是IE浏览器的兼容性问题。IE浏览器是每一个前段开发人员的痛。好了，废话不多说，上代码，可以兼容IE8/IE10/谷歌浏览器，目前已经测试的是这2个浏览器。如果大家发现问题，可以及时反馈，留言给我。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>图片预览小功能</title>
<style type="text/css">
<!-- 设置预览框的样式 -->
#preview{width:300px;height:300px;border:1px solid #000;overflow:hidden;}
<!-- 设置预览大图片的样式 -->
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<script type="text/javascript">
function previewImage(file){
//预览框尺寸
var MAXWIDTH = 300;
var MAXHEIGHT = 300;
//获取img标签的父标签，div对象
var div = document.getElementById('midImgdiv');
//判断是否是IE浏览器
if (file.files && file.files[0]){
div.innerHTML = '<img id=imghead>';
var img = document.getElementById('imghead');
img.onload = function(){
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
img.width = rect.width;
img.height = rect.height;
}
var reader = new FileReader();
reader.onload = function(evt){img.src = evt.target.result;}
reader.readAsDataURL(file.files[0]);
}
else{
var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
var src = document.selection.createRange().text;
div.innerHTML = '<img id="imghead" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);">';
//获取刚才设置的img对象
var img = document.getElementById('imghead');
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>";
}
}
//工具方法
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = {top:0, left:0, width:width, height:height};
if( width>maxWidth || height>maxHeight ){
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if(rateWidth > rateHeight){
param.width = maxWidth;
param.height = Math.round(height / rateWidth);
}
else{
param.width = Math.round(width / rateHeight);
param.height = maxHeight;
}
}
param.left = Math.round((maxWidth - param.width) / 2);
param.top = Math.round((maxHeight - param.height) / 2);
return param;
}
</script>
</head>
<body>
<div id="preview"> <img id="imghead" width="300" height="300" border="0" src='../images/demo.jpg' />
<!--无预览时的默认图像，自己弄一个-->
<img class="oldimg" src="/images/1218471878671.gif" id="oldimg"/>
</div>
<br/>
<input type="file" onchange="previewImage(this)" />
</body>
</html>
另外分享一些如何获取图片宽度的代码：
function testwidth(){
$("img[class~='mimg']").each(function(){
var img = new Image();
img.src = $(this).attr("src");
if(img.width != 0){
$(this).next().text("图片的宽度为：" + img.width);
}
});
}
在动态获取图片宽度时，可以使用new Image()的方式。比如Ajax异步加载后显示的图片，或者通过JS显示到div中的图片。用这个方法能够更准确的获得图片的宽度。
关于JQuery中如何判断对象是否存在的问题：
//定义一个变量
var image_width = "";
//new一个image对象
var newimg = new Image();
//如果id = img_1 的对象存在
if($("#img_1").length>0){
newimg.src = $("#img_1").attr("src");
}
//如果id = mobileimg 的对象不存在
else{
newimg.src = $("#img_2").attr("src");
}
//获取宽度
image_width = <span style="font-family: Arial, Helvetica, sans-serif;">newimg</span>.width;
/**
* 如何使用jquery判断对象是否存在
*/
if($("#img_1").length>0){
alert("对象存在");
}
else{
alert("对象不存在");
}
推荐采用上面的方法，因为通过 $("#img_1")获取对象时，即使对象不存在，jquery也会返回一个object。