title: How to insert multiple instances of an image into html using FileReader.readAsDataURL()?
body: <p>I want to insert an image that a user selects from their local machine using <code>FileReader.readAsDataURL()</code> into multiple <code>&lt;img&gt;</code> elements on a single html page.</p>
  
  <p>Using the example code provided by the <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL" rel="nofollow noreferrer">MDN docs for <code>FileReader.readAsDataURL()</code></a>, <strong>the image only gets inserted into the first <code>img</code> element, not the rest</strong>.</p>
  
  <p>I thought the reason the image is only inserted into the first <code>&lt;img&gt;</code> instance is because the example code uses <code>document.querySelector('img')</code>. However, when I use <code>document.querySelectorAll('img')</code>, it still does not work.</p>
  
  <p>The MDN docs provide <a href="https://codepen.io/bzelip/pen/dOQdwG" rel="nofollow noreferrer">a working codepen example</a> that you can see in action. Here is their static code:</p>
  
  <pre><code>&lt;!--html--&gt;
  &lt;input type="file" onchange="previewFile()"&gt;&lt;br&gt;
  &lt;img src="" height="200" alt="Image preview..."&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>//js
  function previewFile() {
    var preview = document.querySelector('img');
    var file    = document.querySelector('input[type=file]').files[0];
    var reader  = new FileReader();
  
    reader.addEventListener("load", function () {
      preview.src = reader.result;
    }, false);
  
    if (file) {
      reader.readAsDataURL(file);
    }
  }
  </code></pre>
  
  <p>Here is <a href="http://codepen.io/bzelip/pen/vyQqZJ" rel="nofollow noreferrer">a working codepen of my code</a>, and below is my static code.</p>
  
  <pre><code>&lt;div&gt;
    &lt;label&gt;Select an Image&lt;/label&gt;
    &lt;input type="file" onchange="previewFile()"&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;img id="small" src="http://placehold.it/900x900"/&gt;
    &lt;img id="med" src="http://placehold.it/1200x1200"/&gt;
    &lt;img id="large" src="http://placehold.it/1500x1500"/&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
    function previewFile() {
      var preview = document.querySelector('img');
      var file    = document.querySelector('input[type=file]').files[0];
      var reader  = new FileReader();
  
      reader.addEventListener("load", function () {
        preview.src = reader.result;
      }, false);
  
      if (file) {
        reader.readAsDataURL(file);
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>Can anyone offer some help to get the user selected image to populate all of the <code>&lt;img&gt;</code> elements on the page instead of just the first element?</p>