上传图片预览功能的IE浏览器兼容性问题的实现：JS+JQuery+CSS完整版

最新推荐文章于 2019-02-09 22:25:00 发布

原创最新推荐文章于 2019-02-09 22:25:00 发布 · 5.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#图片预览 #jquery

web前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种兼容IE8/IE10/谷歌浏览器的图片预览功能实现方法，使用JS+JQuery+CSS技术栈，解决了前端开发中常见的图片预览及大小调整问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上传图片预览功能的实现：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。