图片文件上传缩略图

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

Papaver

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

阅读量712

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/Papaver_Flower/article/details/9612537

版权

Web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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" οnchange="previewImage(this);"/>
</body>
</html>