Как правильно проверить разрешение изображения с помощью jQuery перед загрузкой?

Question

[Михаил]

Здравствуйте, используется проект на Asp.Net MVC и есть форма на которой есть input type="file" на котором повешено правило. Задача состоит в том, чтобы сразу после того как мы выбрали изображение, проверить его на высоту и ширину. Вот код

<input type="file" name="FacebookImage" class="input-width-hundred-percent"  data-rule-imageFacebookResolution="true" id="FacebookImage" />

Вот сама валидация

$.validator.addMethod("data-rule-imageFacebookResolution", function (value, elem, attrValue) {
            var _URL = window.URL;
                var file, img;
                if ((file = elem.files[0])) {
                    img = new Image();
                    img.onload = function () {
                        alert("Width:" + this.width + "   Height: " + this.height);
 
                        if (this.width < 520 && this.height < 290) {
                            return false;
                        } 
                            return true;
                     
                    };
                    img.src = _URL.createObjectURL(file);
            }
            return false;
        }, "Минимальное разрешение должно быть 520 x 290);

Но проблема в самой функции onload, так как она асинхронна, то даже если я загружаю изображение с правильным разрешением, то ошибка валидации всё равно остается и соответственно форма валидацию не проходит. На кнопку сохранить повешено следующее:

$("#SaveBtn").click(function () {
            var form = $("#ettings");
            form.validate();
            if (form.valid()) {
                var data = new FormData(document.getElementById('settings'));
                $.ajax({
                    url: '@Url.Action(MVC.Product.SocialShareEdit())',
                    type: "POST",
                    data: data,
                    processData: false,
                    contentType: false,
                    success: function () {
                        $("#modal").modal('hide');
                        $.ajax({
                            url: '@Url.Action(MVC.Product.SocialShareIconsPartial(Model.DeliveryType))',
                            type: "POST",
                            processData: false,
                            contentType: false,
                            success: function (message) {
                                $("#Icons").html(message);
                            }
                        });
                    }
                });
            }
            });

Вопрос, как правильно провалидировать изображение? Можно как то без onload обойтись? Спасибо

Answer 1

[Владимир Проскурин]

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

$('#FacebookImage').on('change',function(){
            var elem = this;
            var _URL = window.URL;
                var file, img;
                if ((file = elem.files[0])) {
                    img = new Image();
                    img.onload = function () {
                        elem.dataset['imageWidth'] = this.width;
                        elem.dataset['imageHeight'] = this.height; 
                    };
                    img.src = _URL.createObjectURL(file);
            }
});

И теперь в валидатор такой

$.validator.addMethod("data-rule-imageFacebookResolution", function (value, elem, attrValue) {
   var width = parseInt(elem.dataset['width']);
   var height = parseInt(elem.dataset['height']);
   
   if width  < 520 && height  < 290) {
      return false;
   } 
   return true;
});

Таким образом, получение размеров картинки происходит при выборе файла, а пока пользователь дотянется к кнопке "отправить", картинка уже загрузится, ну или можно еще блокировать кнопку "отправить" пока не произойдет onload картинок.
Код может быть не правильным, я не пробовал, набирал как есть, но думаю мысль ясна.

Comments

[Михаил]

хмм спасибо за идею, сейчас пробую ваш код, почему в самом валидаторе width NaN

[Михаил]

а, поставил imageWidth и заработало, спасибо, я не знал о dataSet

[ProjectSoft]

Михаил если вам дали решение - не забывайте помечать ответ, как решение.
Уважайте время и труд.