上传前的图片高度和宽度

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+