title: How to preview an uploaded image as the background image of a div?
body: <p>I want to preview an uploaded image file in a div. I have done a bit of research and I have found this piece of code from <a href="https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded">this post</a>, it is the code to preview an uploaded image file, but in an <code>&lt;img&gt;</code> tag:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function readURL(input) {
          if (input.files &amp;&amp; input.files[0]) {
              var reader = new FileReader();
  
              reader.onload = function (e) {
                  $('#blah').attr('src', e.target.result);
              }
  
              reader.readAsDataURL(input.files[0]);
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>The associated HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
          &lt;input type='file' onchange="readURL(this);" /&gt;
          &lt;img id="blah" src="#" alt="your image" /&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Very cool. However, what I want is to display the uploaded image as the background image of a div, an example of which would be like this:</p>
  
  <p><code>&lt;div class="image" style="background-image:url('');"&gt;&lt;/div&gt;</code></p>
  
  <p>I know that, logically, I would have to replace</p>
  
  <p><code>$('#blah').attr('src', e.target.result);</code></p>
  
  <p>with something like</p>
  
  <p><code>$('div.image').attr('style', e.target.result);</code>.</p>
  
  <p>But how to make the path of the image go into the value of the 'background-image' property?</p>
  
  <p>And yes, do I need to link to the JQuery library for this?</p>
  
  <p>Thank you.</p>