title: Image on Browse and upload file button
body: <p>I want to have image button for "browse" and "upload"</p>
  
  <p>I have textbox using the following code:</p>
  
  <p>CSS</p>
  
  <pre><code>   .uploadpathdiv
      {
       margin:0;
       height:44px;
       width:464px;
       background:url('images/img-upload.png') no-repeat bottom;
      }
  
  
  .uploadpath
  {
   background:none;
   border:none;
   width:400px;
   height:40px;
   margin:0;
   padding: 2px 7px 0px 7px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:11px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="uploadpathdiv"&gt;
  &lt;input class="uploadpath" name="path" type="text" /&gt;
  &lt;/div&gt;
  &lt;img src="/themes/scaccarium/images/button-upload.png" /&gt;
  &lt;img src="/themes/scaccarium/images/button-browse.png" /&gt;
  </code></pre>
  
  <p>The image code is for both "browse" and "upload" button.</p>
  
  <p>Please help me to correct the above code so that when i press the browse button i get "file selection option" as you see when you use <code>&lt;input type = "file" name="browse"&gt;</code>. Secondly, the path of the file must be shown in the textbox above.</p>
  
  <p>Thirdly when i press the upload button the file should be uploaded</p>