JS获取上传图片的尺寸和大小

  最近工作要用到上传文件时限制上传图片大小这个功能，于是开始找类似的文章，看了很多东西，最后结果到也还可以。

  目前来说，谷歌，火狐，IE系列的7,8,9都已经过测试，可以获取到上传图片的原尺寸。接下来上代码。

 

第一种方法需要支持H5，思路是先将图片进行预览，然后不对图片进行任何渲染，包括CSS，JS，然后去获取预览图片的尺寸，当然，如果不想预览的话可以将img

标签隐藏掉。

<div>
	<div>
		<input type="text" disabled="disabled" value="建议规格（200*200）"/>
	</div>
	<form id="upload" action="<%=basePath%>tools?fileUpload" method="post" enctype="multipart/form-data">
		<input type="file" accept="image/*" id="file"/>
		<input type="button" value="提交" onclick="sub()"/>
	</form>
	<img id="preview" style="display:none" onload="img(this)"/>
</div>

这是页面的标签，ID为“preview”的img标签用于进行预览，以及在script块里面获取数据

<script type="text/javascript">
	$(function () {
		//调用插件进行预览
		$("#file").uploadPreview({ Img: "preview"});
	});
</script>
<script type="text/javascript">
	var imgWidth, imgHeight;
	//获取图片宽高
	function img(obj){
		//只支持谷歌火狐
		imgWidth = obj.width;
		imgHeight = obj.height;
		alert(obj.width);
		alert(obj.height);
	}
</script>
<script type="text/javascript">
	function sub(){
		var a = $("#file").get(0).files[0];
		//需支持H5
		//获取文件大小 单位B
		//console.log(a.size);
		//对图片的宽和高进行判断
		if(parseInt(imgWidth)>200||parseInt(imgHeight)>200){
			alert("图片规格超出200");
			return false;
		}
		//$("#upload").submit();
	}
</script>

这里用了三段代码进行，第一段就是对上传图片进行预览（写入img标签），第二段则是在img标签onload之后对获取图片本身，并获取图片的尺寸，第三段则是对图片的尺寸进行操作了。这个方法需要jquery和另一个js文件的支持，并且jquery的版本不能高于1.8，否则有些东西就无法使用。接下来就是IE系列了，IE系列则是比较麻烦，而且也是找了好久才找到的。哦对了，第一种方法好像可以支持IE最新的那款浏览器。

看代码。。。

<div>
	<h1>IE兼容测试</h1>
	<div id="preview_wrapper">
		<div id="preview_fake">
			<img id="preview" onload="onPreviewLoad(this)" border="1"/>
		</div>
	</div>
	<br/>
	<input id="upload_img" type="file" onchange="onUploadImgChange(this)"/>
	<br/>
	<img id="preview_size_fake" border="1"/>
</div>

这是页面的代码。

<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 ); 
		alert(objPreviewSizeFake.offsetWidth);     ----------------获取图片尺寸
		alert(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:width, height:height, 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>

这里面已经有一部分说明就不再细说，因为是自己先用来测试的，所以现在是实现了需求，具体的好多东西都还没有调整，比如IE获取到尺寸之后下面会多出一块空白。到目前为止第二种方法已经可以在IE的7,8,9三个版本上面获取到尺寸。

目前来说，卡在了IE10上面，这几天有些事情停止继续寻找办法了。等到找到方法之后会回来继续更新的。刚刚找了下发现博客并不支持上传文件，所以在这里把js文件的名字说一下。《《《《《《《《《《《《《《《《prelook.js》》》》》》》》》》》》》》》算不上原创，大多是从网上找来的，发在这里第一是留个纪念，第二是不定什么时候会再用到，做个保存。