title: Change "Choose File" button and keep showing the file name
body: <p>It is an old question, but I have not found a solution that fulfils my need.</p>
  
  <p>First, I want to change to <code>Choose File</code> to another button style (eg, <code>btn btn-primary</code>). Second, after choosing a file, I still want its name to be shown on the screen, so that people know what has been chosen.</p>
  
  <p>I have tried two solutions in <code>Chrome 53.0.2785.116</code>. They do change the text of <code>Choose File</code>, whereas none of them shows the file name in response:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script type="text/javascript"&gt;
      function performClick(elemId) {
        var elem = document.getElementById(elemId);
        if(elem &amp;&amp; document.createEvent) {
        var evt = document.createEvent("MouseEvents");
        evt.initEvent("click", true, false);
        elem.dispatchEvent(evt);
        }
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;form action="uploadfile.php" method="post" enctype="multipart/form-data"&gt;
  
      &lt;!-- http://stackoverflow.com/a/16015086/702977 --&gt;
      &lt;a href="#" class="btn btn-primary" type="button" onclick="document.getElementById('file').click(); return false;"&gt;Browse&lt;/a&gt; &lt;input id="file" name="file" type="file" style="visibility: hidden; display: none;" /&gt;
  
      &lt;!-- http://stackoverflow.com/a/6463467/702977 --&gt;
      &lt;!-- &lt;a href="#" class="btn btn-primary" type="button" onclick="performClick('file');"&gt;Choose File&lt;/a&gt;&lt;input type="file" name="file" id="file" style="position: fixed; top: -100em" /&gt;--&gt;
  
      &lt;input type="submit" id="u_button" name="u_button" value="Upload the file"&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is <a href="http://jsbin.com/cacaco/1/edit?html,output" rel="nofollow">JSBin</a></p>
  
  <p>Does anyone have a solution? I am open to non-purely HTML solution as well (eg, JQuery)...</p>