Проверка размеров изображения с помощью плагина jQuery

Question

У меня есть форма, где валидация происходит в плагине проверки jQuery. Моя форма содержит два элемента: тип ввода = файл и кнопку отправки. Пользователь будет выбирать изображение, и если это изображение меньше 500 пикселей, оно не будет принято и должно появиться сообщение об ошибке. Я создал новый метод для этой ширины, но по какой-то причине он не работает. Сообщение об ошибке не отображается, когда я пытаюсь отправить изображение размером менее 500 пикселей. Вот мой jsfiddle.

HTML

<form class="some_form" enctype="multipart/form-data" method="post" action=""> 
    <input type="file" name="photo" id="photoInput" /> 
    <input type="submit"> 
</form> 

JQuery

$.validator.addMethod('width', function(value, element) { 
    if ($(element).data('width')) { 
    return $(element).data('width') >= 500; 
    } 

    return true; 
}, 'Image needs to be wider than 500px'); 

$(".some_form").validate({ 
    rules: { 
    photo: { 
     required: true, 
     width: 500 
    } 

    }, 

    messages: { 
    photo: { 
     required: "You must insert an image", 
     width: "Your image's width must be greater than 500px" 
    }, 
    } 

}); 

Answer 1

Вы можете загрузить файл изображения в <img> элемент, а затем получить ширину этого элемента.

---

Сначала добавьте элемент контейнера в ваш HTML, чтобы держать <img> элемент:

<form class="some_form" enctype="multipart/form-data" method="post" action=""> 
    <input type="file" name="photo" id="photoInput" /> 
    <input type="submit"> 
</form> 
<div id="imgContainer"></div> 

---

Далее, определить метод валидатора:

$.validator.addMethod('minImageWidth', function(value, element, minWidth) { 
    return ($(element).data('imageWidth') || 0) > minWidth; 
}, function(minWidth, element) { 
    var imageWidth = $(element).data('imageWidth'); 
    return (imageWidth) 
     ? ("Your image's width must be greater than " + minWidth + "px") 
     : "Selected file is not an image."; 
}); 

Примечания:

1. Как вы можете видеть, метод предполагает, что он может получить ширину изображения, вызвав .data('imageWidth') на элемент ввода файла. Мы будем устанавливать это значение в коде, показанном ниже.
2. Кроме того, метод предполагает, что когда .data('imageWidth') возвращает undefined, выбранный файл не является изображением.

---

Вы можете теперь использовать minImageWidth метод, как это:

var validator = $('.some_form').validate({ 
    rules: { 
    photo: { 
     required: true, 
     minImageWidth: 500 
    } 
    }, 
    messages: { 
    photo: { 
     required: "You must insert an image" 
    }, 
    } 
}); 

---

Наконец, добавьте обработчик изменения-событий для ввода имени файла, который создает <img> элемент и добавляет его к контейнер. Он также установит значение .data('imageWidth') на элемент ввода файла.

var $submitBtn = $('.some_form').find('input:submit'), 
    $photoInput = $('#photoInput'), 
    $imgContainer = $('#imgContainer'); 

$('#photoInput').change(function() { 
    $photoInput.removeData('imageWidth'); 
    $imgContainer.hide().empty(); 

    var file = this.files[0]; 

    if (file.type.match(/image\/.*/)) { 
    $submitBtn.attr('disabled', true); 

    var reader = new FileReader(); 

    reader.onload = function() { 
     var $img = $('<img />').attr({ src: reader.result }); 

     $img.on('load', function() { 
     $imgContainer.append($img).show(); 
     var imageWidth = $img.width(); 
     $photoInput.data('imageWidth', imageWidth); 
     if (imageWidth < 500) { 
      $imgContainer.hide(); 
     } else { 
      $img.css({ width: '400px', height: '200px' }); 
     } 
     $submitBtn.attr('disabled', false); 

     validator.element($photoInput); 
     }); 
    } 

    reader.readAsDataURL(file); 
    } else { 
    validator.element($photoInput); 
    } 
}); 

Примечание:

1. Когда изображение загружено, его ширина помещаются как .data('imageWidth') значение на входной файл элемент.
2. Пока изображение загружается, кнопка отправки отключена, поэтому пользователь не может отправить форму.
3. Проверка выполняется сразу после загрузки изображения. То есть пользователю не нужно нажимать кнопку отправки, чтобы сообщение об ошибке отображалось. Это достигается путем вызова validator.element().
4. Вы не можете получить ширину элемента <img>, пока он не будет добавлен в DOM.Он также должен быть виден, но приведенный выше код показывает, как он может быть скрыт сразу после этого.

jsfiddle

---

Литература:

• https://developer.mozilla.org/en-US/docs/Web/API/FileReader
• http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api
• jquery validation plugin, how to add multiple custom messages in custom method