title: Understanding <input type="file">
body: <p>I am trying to get my head around  and using the selected image in a website. </p>
  
  <p>Let's say I have a simple website that lets the user select an image from their system using: </p>
  
  <pre><code>&lt;input type="file" id="userImage"&gt;
  </code></pre>
  
  <p>Then in the JavaScript I can do this to get the file:</p>
  
  <pre><code>var userImage = document.getElementById('#userImage').files[0]; 
  </code></pre>
  
  <p><strong>Questions:</strong></p>
  
  <p>1) Can I now use userImage? Such as drawing it on a canvas, or do I need to uploaded it to the websites server first?</p>
  
  <p>2) If I use the image, does the website have to upload it every-time I use it, or does it stay in memory?</p>
  
  <p>3) How do I know when the image is ready to use? (for the same reasons all images should be preloaded at the start before drawn on canvas)</p>
  
  <p>Thanks so much for your help :)</p>
  
  <p><strong>Follow-up</strong></p>
  
  <p>Thanks for your answers. So it looks like it is possible in html5 but not yet universally supported. </p>