上传前的图片高度和宽度

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 - 使用Web应用程序中的文件

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

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

3)提醒用户(或不)

这是一个工作版本:JSFiddle.

浏览器兼容性:Firefox 3.6 +,Chrome 7 +,IE 10 +,Opera 12+