title: Preview images before upload
body: <p>I have a page with four images for the user to select. I want the user to be able to preview each image on the site before upload.</p>
  
  <p>The JavaScript code below works for only one image but I would like it to work for multiple images uploaded via <code>&lt;input type="file"&gt;</code>.</p>
  
  <p>What will be the best way to do this?</p>
  
  <pre><code>function readURL(input) {
      if (input.files &amp;&amp; input.files[0]) {
          var reader = new FileReader();
  
          reader.onload = function (e) {
              $('#output').attr('src', e.target.result);
          }
  
          reader.readAsDataURL(input.files[0]);
      }
  }
  
  $("#file-input").change(function () {
      readURL(this);
  });
  </code></pre>