title: Getting the name of selected file using JavaScript
body: <p><a href="http://jsfiddle.net/Shmoyojoe/b5pfX/" rel="nofollow">Here</a>'s the fiddle. I have a project where I am making non-styleable form elements,<a href="http://github.com/JJP123/BlueBeard" rel="nofollow">GitHub</a>, and right now I am making a file input. You can find the source codes at the bottom of the question. I have used <code>opacity: 0;</code> on the input, and put a <code>&lt;span&gt;&lt;/span&gt;</code> over it. The extra space in the <code>span</code> is for the name of the file selected, but I am trying to think of a way to retrieve the file name using JavaScript or jQuery.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;span&gt;Choose File&lt;input type='file'&gt;&lt;/span&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      background: #252525;
      color: #96f226
  }
  span {
      background: #4a4a4a;
      cursor: pointer;
  }
  input {
      opacity: 0;
      cursor: pointer;
  }
  </code></pre>
  
  <p>JS/jQuery:</p>
  
  <pre><code>none yet
  </code></pre>