title: Customize upload button as image preview
body: <p>I am using the following code to display an image preview. In the below code the image preview and choose button are separate but I want both them to be the same like in the below image: 
  <a href="https://i.stack.imgur.com/dTeXr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dTeXr.png" alt="enter image description here"></a> </p>
  
  <p>As shown in the image above, first it shows the add button. Then, once an image is selected, it displays a preview.</p>
  
  <p>Here is the code I used: </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="imagePreview"&gt;&lt;/div&gt;
  &lt;input id="uploadFile" type="file" name="image" class="img" /&gt;
  </code></pre>
  
  <p><strong>Script</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function() {
      $("#uploadFile").on("change", function()
      {
          var files = !!this.files ? this.files : [];
          if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
  
          if (/^image/.test( files[0].type)){ // only image file
              var reader = new FileReader(); // instance of the FileReader
              reader.readAsDataURL(files[0]); // read the local file
  
              reader.onloadend = function(){ // set image data as background of div
                  $("#imagePreview").css("background-image", "url("+this.result+")");
              }
          }
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#imagePreview {
      width: 180px;
      height: 180px;
      background-position: center center;
      background-size: cover;
      -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
      display: inline-block;
  }
  </code></pre>