title: Using Jquery to style file input
body: <p>I have a file input that I have styled to be a custom button, but i'm not able to keep the upload image when the user uploads the file.  It is replaced with the text of the file name but i would also like to keep the image.  I know it is something simple but can't seem to figure it out.  here is the code:</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div id="file"&gt;&lt;img src="~/Images/choosefile.png" /&gt;&lt;/div&gt;
   &lt;input type="file" name="file"/&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var wrapper = $('&lt;div/&gt;').css({ height: 0, width: 0, 'overflow': 'hidden' });
  var fileInput = $(':file').wrap(wrapper);
  
  fileInput.change(function () {
      $this = $(this);
      $('#file').text($this.val().substring(12, 75));
  })
  
  $('#file').click(function () {
      fileInput.click();
  }).show();
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>`#file 
  {
      display:none;
      cursor: pointer;
  }​`
  </code></pre>
  
  <p><em><strong></em>**Update - here is how it turned out if anyone would like to use it*<em>*</em>*</strong></p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div id="file" style="margin-right:10px;"&gt;&lt;img src="~/Images/choosefile.png" style="margin-bottom:-5px; padding-right:10px;"/&gt;&lt;span style="border-left-width:10px;"&gt;&lt;/span&gt;&lt;/div&gt;
   &lt;input type="file" name="file"/&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var wrapper = $('&lt;div/&gt;').css({ height: 0, width: 0, 'overflow': 'hidden' });
  var fileInput = $(':file').wrap(wrapper);
  
  fileInput.change(function () {
      $this = $(this);
      $('#file&gt;span').text($this.val().substring(12, 75));
  })
  
  $('#file').click(function () {
      fileInput.click();
  }).show();
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>`#file 
  {
      display:none;
      cursor: pointer;
  }​`
  </code></pre>