title: Get value of input of type file
body: <p>I have the following HTML markup:</p>
  
  <pre><code>&lt;div&gt;
    &lt;a&gt;browse&lt;input type="file" name="annex"&gt;&lt;/a&gt;
    &lt;span class="filename"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am using this markup to style the file input with CSS.</p>
  
  <p>I would like to show the file name (filename.ext) in the span with class "filename".</p>
  
  <p>I tried the following with JQuery:</p>
  
  <pre><code>$('.file').on('file', function (event, files, label) {
    $('.path').html($(this).val().replace(/\\/g, '/').replace(/.*\//, ''));
    alert($(this).val());
  });
  </code></pre>
  
  <p>The span is still empty and the alert result is also empty.</p>
  
  <p>How can I do this?</p>
  
  <p>Thank You,
  Miguel</p>