Gostaria de saber como usar o jquery validate para validar as dimensões da imagem que está sendo enviada. No meu caso, a imagem tem que ter 400px de altura e largura.
1 Resposta
Para fazer isso é necessário criar uma validação customizada, segue um exemplo:
function readImage(file, element) {
var reader = new FileReader();
var image = new Image();
reader.readAsDataURL(file);
reader.onload = function (_file) {
image.src = _file.target.result;
image.onload = function() {
$(element).data('height', this.height);
$(element).data('width', this.width);
$(element).data('size', ~~((file.size / 1024) / 1024));
}
}
};
jQuery.validator.addMethod('height', function (value, element, param) {
if ($(element).data('height')) {
return $(element).data('height') == param;
} return this.optional(element) || true;
}, 'A altura deve ser exatamente {0}px');
jQuery.validator.addMethod('width', function (value, element, param) {
if ($(element).data('width')) {
return $(element).data('width') == param;
} return this.optional(element) || true;
}, 'A largura deve ser exatamente {0}px');
jQuery(function ($) {
"use strict";
$('#image').change(function () {
var files = this.files;
if (files && files[0]) {
readImage(files[0], '#image');
}
});
$('#update_profile').validate({
rules: {
image: {
required: true,
width: 400,
height: 400,
}
},
});
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<form id="update_profile" method="post" action="">
<input type="file" name="image" id="image" />
<input type="submit" value="Save" />
</form>