title: HTML Javascript File Upload
body: <p>I have following HTML object with file</p>
  
  <pre><code>  &lt;form name='file_form' class="panel-body"&gt;
      &lt;input type="file" id="file" name="file[]" /&gt;
      &lt;input type='button' id='btnSendFile' value='sendFile' /&gt;
      &lt;output id="list"&gt;&lt;/output&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>Where using the file browse in type="file", I select a file to upload.  When I click on btnSendFile, the file name of the selected file appears under name.  However file variable is null when I pass it below. I need to access file object properties of file object.</p>
  
  <p>I have a function that sends the file.</p>
  
  <pre><code>var file ;
  
  function sendFile(file) {
  var to = $('#to').get(0).value;
  var filename = file.name;
  var filesize = file.size;
  var mime = file.type;
  
  }
  
  $('#btnSendFile').bind('click', function() {
   sendFile(file);
  });
  </code></pre>
  
  <p>How do I get the file object in javascript where I need to file.name, file.size, and file.type? What should I assign variable file ?</p>
  
  <p><strong>UPDATE:</strong>
  <em>Answer:</em></p>
  
  <pre><code>file= $("#file")[0].files[0];
  </code></pre>