title: Check image width and height before upload with Javascript
body: <p>I have a JPS with a form in which a user can put an image:</p>
  
  <pre><code>&lt;div class="photo"&gt;
      &lt;div&gt;Photo (max 240x240 and 100 kb):&lt;/div&gt;
      &lt;input type="file" name="photo" id="photoInput" onchange="checkPhoto(this)"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have written this js:</p>
  
  <pre><code>function checkPhoto(target) {
      if(target.files[0].type.indexOf("image") == -1) {
          document.getElementById("photoLabel").innerHTML = "File not supported";
          return false;
      }
      if(target.files[0].size &gt; 102400) {
          document.getElementById("photoLabel").innerHTML = "Image too big (max 100kb)";
          return false;
      }
      document.getElementById("photoLabel").innerHTML = "";
      return true;
  }
  </code></pre>
  
  <p>which works fine to check file type and size. Now I want to check image width and height but I cannot do it.<br>
  I have tried with <code>target.files[0].width</code> but I get <code>undefined</code>. With other ways I get <code>0</code>.
  <br>Any suggestions?</p>