Member 13991656 Ответов: 1

Как проверить размеры изображения перед его загрузкой в javascript?


Пожалуйста, дайте мне знать, если есть какое-либо решение для проверки размеров изображения перед загрузкой его в javascript.

Что я уже пробовал:

Я попробовал приведенный ниже код в javascript, который возвращает сообщение об ошибке правильно, но форма получает отправку, несмотря на то, что размеры изображения недопустимы.

$(function () {
           $("#btnSubmit").bind("click", function () {
               //Get reference of FileUpload.
               var fileUpload = $("#fuLogo")[0];
               //event.preventDefault();
               if ((fileUpload.value != null && fileUpload.value != "") ||(document.getElementById("LogoDiv").style.display==="none")) {
                   //Check whether the file is valid Image.
                   var regex = /^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))+(.jpg|.JPG|.jpeg|.JPEG|.bmp|.BMP|.png|.PNG|.ico|.ICO|.gif|.GIF)$/;
                   if (regex.test(fileUpload.value.toLowerCase())) {
                       //Check whether HTML5 is supported.
                       if (typeof (fileUpload.files) != "undefined") {
                           //Initiate the FileReader object.
                           var reader = new FileReader();
                           //Read the contents of Image File.
                           reader.readAsDataURL(fileUpload.files[0]);
                           reader.onload = function (e) {
                               //Initiate the JavaScript Image object.
                               var image = new Image();
                               //Set the Base64 string return from FileReader as source.
                               image.src = e.target.result;
                               image.onload = function () {
                                   //Determine the Height and Width.
                                   var height = this.height;
                                   var width = this.width;
                                   if (height > 150 || width > 1500) {
                                       //alert("Please upload image with valid dimensions.");
                                       //event.preventDefault();
                                       document.getElementById("lblLogoMsg").innerHTML = "Please upload image with valid dimensions.";
                                       //event.preventDefault();
                                       return false;
                                   }
                               };
                           }
                       }
                   }
               }
           });
       });

1 Ответов

Рейтинг:
2

F-ES Sitecore

Похоже, что вы читаете измерения, когда отправляете форму, поэтому, когда вы "возвращаете false", если измерения неверны, вы отменяете событие "onload", а не отправку формы.

Если вы посмотрите на этот способ сделать это;

javascript - можно ли проверить размеры изображения перед загрузкой? - переполнение стека[^]

событие отправки отменяется, а затем событие onload выполняет отправку формы после проверки измерений.

Google для "html5 проверьте размеры изображения перед загрузкой", и вы также найдете другие примеры.