title: HTML5 Form Check image width and height and alert if bigger
body: <p>EDIT</p>
  
  <p>NOT A DUPLICATED</p>
  
  <p>Need to stop the form submit if the file is bigger in dimension not in size. Some answers in other posts are about file size, my question is about dimensions. Size and dimensions are 2 different things ...</p>
  
  <p>I am using the following form to upload images. It is working fine but because it is a store and I want the catalog of products to looks nice I need the images uploaded to be exactly 200px width and 200px height. If the image is bigger in width or height I need to show an alert so the uploader chose another image or edit the one he is trying to upload.</p>
  
  <pre><code>&lt;form action="upload" enctype="multipart/form-data" method="post"&gt;
  
      Upload image:
      &lt;input id="image-file" type="file" name="file" /&gt;
      &lt;input type="submit" value="Upload" /&gt;
  
      &lt;script type="text/javascript"&gt;
          $('#image-file').bind('change', function() {
              alert('here we have to do something');
          });
      &lt;/script&gt;
  
  &lt;/form&gt;
  </code></pre>