title: Set div background image from file upload
body: <p>I have a form that allows me to upload images :-)</p>
  
  <p>Is it possible when I select an image to upload, it sets the white area with the image as a background image &amp; also removes the text 'Select Image'.</p>
  
  <p><strong><a href="https://jsfiddle.net/vafk2Lhy/" rel="nofollow noreferrer">FIDDLE</a></strong></p>
  
  <p>Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("input[name='FileOne']").on("change", function(event1) {
        src1 = URL.createObjectURL(event1.target.files[0]);
        document.getElementById("FileOne").style.backgroundImage = 'url('+src1+')';
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.form-file-upload-container {
      float: left;
      width: 100%;
      margin-bottom: 12px;
      margin-top: 12px
  }
  
  @media (min-width: 640px) {
      .form-file-upload-container {
          margin-bottom: 20px;
          margin-top: 20px
      }
  }
  
  .form-file-upload {
      position: relative;
      float: left;
      width: 48.5%;
      height: auto;
      margin-right: 3%;
      margin-bottom: 3%
  }
  
  @media (min-width: 450px) {
      .form-file-upload {
          width: 31.3333%
      }
  }
  
  @media (min-width: 750px) {
      .form-file-upload {
          width: 22.75%
      }
  }
  
  @media (min-width: 1600px) {
      .form-file-upload {
          width: 14.1666667%;
          margin-right: 2%
      }
  }
  
  .form-file-upload:nth-child(2n) {
      margin-right: 0
  }
  
  @media (min-width: 450px) {
      .form-file-upload:nth-child(2n) {
          margin-right: 3%
      }
  }
  
  @media (min-width: 1600px) {
      .form-file-upload:nth-child(2n) {
          margin-right: 2%
      }
  }
  
  @media (min-width: 450px) {
      .form-file-upload:nth-child(3n) {
          margin-right: 0
      }
  }
  
  @media (min-width: 750px) {
      .form-file-upload:nth-child(3n) {
          margin-right: 3%
      }
  }
  
  @media (min-width: 1600px) {
      .form-file-upload:nth-child(3n) {
          margin-right: 2%
      }
  }
  
  @media (min-width: 750px) {
      .form-file-upload:nth-child(4n) {
          margin-right: 0
      }
  }
  
  @media (min-width: 1600px) {
      .form-file-upload:nth-child(4n) {
          margin-right: 2%
      }
  }
  
  @media (min-width: 1600px) {
      .form-file-upload:nth-child(6n) {
          margin-right: 0
      }
  }
  
  .form-file-upload-inner {
      width: 100%;
      height: 0;
      padding-top: 133.33333%
  }
  
  .form-file-upload label {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: white;
      z-index: 2;
      cursor: pointer;
      border: 1px solid #AFAFB4;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: #AFAFB4;
      -webkit-transition: background 0.2s ease, border 0.2s ease;
      -moz-transition: background 0.2s ease, border 0.2s ease;
      -o-transition: background 0.2s ease, border 0.2s ease;
      transition: background 0.2s ease, border 0.2s ease
  }
  
  .form-file-upload span {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      font-size: 15px;
      text-align: center;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%)
  }
  
  .form-file-upload span:before {
      content: '';
      background: url(../img/image-upload-icon.png) no-repeat center center #fff;
      background: url(../img/image-upload-icon.svg) no-repeat center center #fff;
      background-size: 65px 56px;
      display: block;
      width: 65px;
      height: 56px;
      margin: 0 auto;
      margin-bottom: 5px
  }
  
  .form-file-upload input {
      position: relative;
      opacity: 0;
      z-index: 1
  }
  
  .form-file-upload .close {
      display: none;
      position: absolute;
      top: -13px;
      right: -13px;
      width: 26px;
      height: 26px;
      font-size: 18px;
      text-align: center;
      line-height: 26px;
      background: white;
      z-index: 3;
      -webkit-transition: background 0.2s ease, color 0.2s ease;
      -moz-transition: background 0.2s ease, color 0.2s ease;
      -o-transition: background 0.2s ease, color 0.2s ease;
      transition: background 0.2s ease, color 0.2s ease
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="form-file-upload"&gt;
  &lt;div class="form-file-upload-inner"&gt;
          &lt;label for="FileOne"&gt;&lt;span&gt;Select Image&lt;/span&gt;&lt;/label&gt;&lt;span class="wpcf7-form-control-wrap FileOne"&gt;&lt;input type="file" name="FileOne" size="40" class="wpcf7-form-control wpcf7-file" id="FileOne" aria-invalid="false" /&gt;&lt;/span&gt;&lt;button class="close" type="button"&gt;&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>