title: Client-side image resolution/size validation
body: <p>I'm designing a website for a printing company. They want an image size/resolution checker that will let their customers upload an image they want to print, and tell them if the image resolution is good enough for printing.</p>
  
  <p>I'm using Adobe Muse, so I need a simple HTML and CSS solution to this without any server-side requirements.</p>
  
  <p>This is what I have so far, based on <a href="https://stackoverflow.com/questions/13572129/is-it-possible-to-check-dimensions-of-image-before-uploading">this question</a>:</p>
  
  <pre><code>window.URL = window.URL || window.webkitURL;
  $("form").submit(function(e) {
      var form = this;
      e.preventDefault(); //Stop the submit for now
  
     //Replace with your selector to find the file input in your form var
     fileInput = $(this).find("input[type=file]")[0];
     file = fileInput.files &amp;&amp; fileInput.files[0];
     if (file) {
         var img = new Image();
         img.src = window.URL.createObjectURL(file);
  
          img.onload = function() {
              var width = img.naturalWidth, height = img.naturalHeight;
              window.URL.revokeObjectURL( img.src );
              if( width == 400 &amp;&amp; height == 300 ) {
                  form.submit();
              } else { 
                  //stop
              } 
          }; 
      } else {
          //No file was input or browser doesn't support client side reading
          form.submit();
      }
  });
  </code></pre>
  
  <p>However, I don't get any popup message. What am I doing wrong?</p>