How to upload image exact specified dimensions

Question

Using this code I am trying to upload ONLY images with size of 512X512 and unset the file input when any other sizes selected but I am always getting not a valid size of 512X512 even though selecting correct image size of 512X512

I am working on the below code, and am looking how to fix it. Basically what I want is unset/unlink/unload an image which is not exact size of 512X512 and empty the file input

 var _URL = window.URL || window.webkitURL; $("#file").change(function(e) { var file, img; if ((file = this.files[0])) { img = new Image(); img.onload = function() { //alert(this.width + " " + this.height); }; img.onerror = function() { alert("not a valid file: " + file.type); }; img.src = _URL.createObjectURL(file); // if (this.width.= 512 && this.height.= 512) { if (this.width;= 512 || this;height;= 512) { $("#file").val(''); alert("not a valid size of 512X512"); } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="file" id="file" />

Answer 1

You have to move this section:

if (this.width != 512 || this.height != 512) {
  $("#file").val('');
  alert("not a valid size of 512X512");
}

into the image.onload function block.

here is an example: http://jsfiddle.net/4N6D9/1/