title: Get image dimensions (before uploading)
body: <p>in a project I work on I need to check image dimensions (width and height) before uploading them. </p>
  
  <p>I need 3 check points </p>
  
  <p>1-> if dimensions are less than 600 X 600 pixels don't accept the uploading </p>
  
  <p>1-> if dimensions are more than 600 x 600  pixels and less then 1200 X 1200 pixels accept with the warning the the quality is not good and </p>
  
  <p>3-> if dimensions are hier than 1200 X 1200 pixels, accept...</p>
  
  <p>I have the code you see.. but there are two issues 1 when an image is 550X700 return acceptable with warning this must be not acceptable...   and the second issue when I try to change the image it keeps also the old values.. please check the code in: <a href="https://jsfiddle.net/timoleon/jukxjvdm/10/" rel="nofollow">jsfiddle</a></p>
  
  <pre><code>$("#file").change(function() {
      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 ((file = this.files[0])) {
          img = new Image();
  
          img.onload = function() {
          //green
              if (this.width &gt; 1200 &amp;&amp; this.height &gt; 1200){
              $('.text1').css('visibility', 'visible');
              $('.text1').append(this.width + "X &amp; " + this.height+ "Y");
              $(".grey").addClass("green");
              $('.textgreen').css('visibility', 'visible')
              }
          //red
              else if ((this.width &lt; 600) &amp;&amp; (this.height &lt; 600)){
              $('.text1').css('visibility', 'visible');
              $('.text1').append(this.width + "X &amp; " + this.height+ "Y");
              $(".btn.btn-success.btn-xs").remove();
              $(".grey").addClass("red");
              $('.textred').css('visibility', 'visible');
              }
           //yellow
              else if (($(this.width &gt; 600) &amp;&amp; $(this.width &lt;1200)) &amp;&amp; ($(this.height &gt; 600) &amp;&amp; $(this.height &lt;1200))){
              $('.text1').css('visibility', 'visible');
              $('.text1').append(this.width + "X &amp; " + this.height+ "Y");
              $(".grey").addClass("yellow");
              $('.textyellow').css('visibility', 'visible')
              }
              else {
              return;
              }
  
  
          };
          img.src = _URL.createObjectURL(file);
  
  
      }
  
  });`
  </code></pre>