title: Dynamically uploading images in HTML and Javascript
body: <p>How can I upload multiple individual images with HTML and Javascript? The code I have is based on this <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsDataURL" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsDataURL</a> but I want to have option to create multiple upload buttons and each upload button should upload an individual image independent of the other buttons.
  Here's my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>     &lt;a class="btn btn-default" href="#" role="button" onclick = "addEntry()" &gt;Add&lt;/a&gt;
        &lt;script&gt;
              function addEntry() {
              var browse = document.createElement("INPUT");
              browse.setAttribute("type", "file");
  
              picture = document.createElement("img");
              picture.src = "";
              picture.setAttribute("alt", "No image chosen");
              picture.setAttribute("height","100");
              browse.setAttribute("onchange", "previewFile(picture)");
              document.body.appendChild(browse);
              document.body.appendChild(picture);
              }
  
              function previewFile(inPic){
  
              var preview = document.querySelector('img');
              var file    = document.querySelector('input[type=file]').files[0]; 
              var reader  = new FileReader();
  
  
              reader.onloadend = function () {
                  preview.src = reader.result;
              }
  
              if (file) {
                  reader.readAsDataURL(file); 
              } else {
                  preview.src = "";
              }
              }
  </code></pre>
  
  <p></p>
  
  <p>
  </p>