图片选择显示缩略图

最新推荐文章于 2021-11-27 20:20:34 发布

iteye_18766

最新推荐文章于 2021-11-27 20:20:34 发布

阅读量153

点赞数

分类专栏： web前端文章标签： html

本文链接：https://blog.csdn.net/iteye_18766/article/details/82575757

版权

web前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

不支持IE6、7、8，但是其中有判断会提示。


<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>图片缩略图</title>
		<script type="text/javascript">
			function previewImage(file){
				var div = document.getElementById("curImg");
				var MAXWIDTH = 50;
				var MAXHEIGHT = 50;

				if(typeof FileReader === "undefined"){
					alert("您的浏览器不支持图片缩略图功能！");
				}else{
					if (file.files && file.files[0]) {
						var myFile = file.files[0];
						if(!/image\/\w+/.test(myFile.type)){ //不是图像文件
							alert("不是图片文件！");
						}else{
							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;
								img.style.marginLeft = rect.left + "px";
								img.style.marginTop = rect.top + "px";
							}

							var reader = new FileReader();
							reader.onload = function(evt){
								img.src = evt.target.result;
							}
							reader.readAsDataURL(myFile);
						}
					} else {
						var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
						file.select();
						var src = document.selection.createRange().text;
						div.innerHTML = '<img id=imghead>';
						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 style="border:1px solid #000; width:50px; height:50px;" id="curImg"></div>
		<input type="file" onchange="previewImage(this);"/>
	</body>
</html>

转[url]http://my.oschina.net/u/1241394/blog/148891[/url]

iteye_18766

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片选择显示缩略图

不支持IE6、7、8，但是其中有判断会提示。[code="html"] 图片缩略图 function previewImage(file){ var div = document.getElementById("curImg"); var MAXWIDTH = 50; var MAXHEIGHT = 50; ...
复制链接

扫一扫