上傳前的圖片高度和寬度

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+