Проверьте размер изображения

Question

Хорошо, вот так, моя пользовательская система работает отлично, и теперь в профиле редактирования я пытаюсь добавить опцию изменения аватара URL.

В настоящее время он работает отлично, но для времени загрузки страниц и тому подобного я стараюсь ограничить обычных пользователей максимальной шириной изображений 300 пикселей, и скажем, около 500 пикселей высоты, которые затем изменяются в размере

В общем, я просто хочу, чтобы функция javascript проверяла URL-адрес изображения (введенного в текстовое поле), и если он превышает желаемый размер, пользователь получает предупреждение о том, что удаленное изображение слишком велико, и процесс завершается есть.

Я пробовал несколько способов, но я так и не достиг своей цели, поэтому любая помощь будет принята с благодарностью!

tl; dr: изображение, введенное пользователем в текстовом поле> нажмите кнопку "Отправить"> если изображение превышает определенный размер> предупреждение и завершить процесс

Спасибо!

Answer 1

Просто создайте новый объект Image с этим URL-адресом и проверьте его атрибуты width и height после события onload.

var img = new Image();
img.onload = function(){
   alert(img.width);
};
img.src = "http://example.com/avatar.png";

Нет необходимости на стороне сервера с этим, но вы должны заметить, что пользователи могут переопределить это, так как это делается исключительно в браузере.

Answer 2

этот вид контроля должен выполняться на стороне сервера. Javascript не должен использоваться для получения размера изображения перед отправкой формы.

Если изображение слишком велико, просто отмените его и верните пользователю сообщение об ошибке

Answer 3

Я думаю, это то, что вы должны делать со своим кодом на стороне сервера.Попросите страницу отправить форму, сервер может получить ее и проверить размер, а затем сервер должен вернуть ошибку, если изображение слишком велико.