在项目中，我们经常会有这样的需求，对上传的文件大小进行限制，传统的做法是在服务器端进行大小限制，例如nginx通过client_max_body_size，php.ini中可以通过upload_max_filesize和post_max_size来设置上传的文件大小。这种做法的缺陷很明显，数据上传到服务器之后，再对其进行监测，大大增加了宽带和服务器的压力。何不放在客户端进行检测？

在IE10及以下的版本，可以通过如下方式检测需要上传文件的大小:

<input type="file" onchange="checksize()"/>
<script>
function checksize(e){
	var ev = e || window.event;
	var uri =  ev.srcElement.value;
	var img = new Image();
	img.onload=function(){
		alert("文件大小为"+(img.fileSize)/1024+"KB");
	}
	img.src=uri;
}
</script>

上面的代码的运行原理是把上传的文件模拟成图片，通过其fileSize属性获取其大小，而由于浏览器的安全策略，其几乎只能运行在本地打开此网页的情况。加上微软在IE11上已经废除了fileSize的属性¹，而现代浏览器厂商为了保护本地操作系统，在用户上传文件的时候，本地资源路径一律采用fakepath²，更加阻止了这种方法获取文件大小的可行性。 …阅读更多>>