背景
在一些比较特殊的需求中，会对上传的文件大小、尺寸做限制，例如某个地方的图片只能是 1920 * 1080 的大小，然后文件体积小于 500KB 等。
上传的时候做限制
一个最简单的上传案例
<input type="file" id="j-input-file" />
document.getElementById('j-input-file').addEventListener('change', function(e) {
console.log(this.files[0]);
// { name: '', size: '', ... }
});
这个样子能拿到需要上传图片的基本信息（其他信息点击查看<input type="file">），size 的单位是 B，需要做单位换算。
如果在支持 HTML5 的浏览器上面，可以通过 FileReader 对象生成预览图，然后获取图片的原始大小。
<input type="file" id="j-input-file" />
<div id="j-img"></div>
document.getElementById('j-input-file').addEventListener('change', function(e) {
const file = this.files[0];
let reader = new FileReader();
// 将文件以Data URL形式读入页面
reader.readAsDataURL(file);
reader.onload=function(e){
//显示文件
let ElImg = document.getElementById('j-img');
ElImg.innerHTML = '<img src="' + this.result +'" alt="" />';
let El = ElImg.getElementsByTagName('img')[0];
El.onload = function() {
console.log(El.width);
console.log(El.height);
}
}
});
如果不支持 HTML5 的浏览器，只有当上传完成后再通过 img 元素加载图片，判断尺寸大小了。
已存在的图片限制
当编辑某个已存在的数据，图片已经上传完整了，但也要对其做限制，这个时候高度、宽度都比较好解决，通过上面类似的方式，用 JavaScript 重新加载一次图片，并且不对它做高宽的限制。
图片大小可以通过 ajax 的方式获取。
// jQuery 的写法
$.ajax({
url: '图片地址',
complete: function (xhr, statusText) {
if (xhr.status === 200) {
// KB
var __size = (xhr.responseText.length / 1024).toFixed(2);
}
}
});
无论是同源还是非同源，都可以知道其大小。