Рисуть высоту и ширину перед загрузкой

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 - Использование файлов из веб -приложений

2) Проверьте размер (ограничивающая коробка) <img/> элемент

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

3) предупредить пользователя (или нет)

Вот рабочая версия: Jsfiddle.

Совместимость браузера: Firefox 3.6+, Chrome 7+, IE 10+, Opera 12+