javascript - 上传前的图片高宽

Question

我正在尝试验证用户上传的图片。因此，在用户添加其图像后，在将其上传到服务器之前，我尝试使用下面的 javascript 代码验证图像尺寸，但它不起作用。

function check_image_dimensions(){
var t=document.getElementById("main_file_1");
e=t.clientWidth;

n="";
o="We could not upload your image because \n \n";
if (e<300) {
(n+="The height of the image must be greater than 300px \n";
}
if(i<300){
n+="The height of the image must be greater than 300px \n";
}

我也试过:

e=t.width;
i=t.height;

但是还是不行。我做错了什么？

谢谢!

Answer 1

类似于:

1) 将图像放在隐藏的<img/> 中元素

请看这个例子:MDN - Using files from web applications

2) 检查 <img/> 的大小(边界框)元素

if(img.getBoundingClientRect().width<300) ...

3) 提醒用户(或不提醒)

这是一个工作版本:JSFiddle .

浏览器兼容性:火狐 3.6+, Chrome 7+,浏览器 10+,歌剧 12+