title: Preview images before upload in MVC
body: <p>So I have been trying to find a good solution to previewing a local image before uploading it seeing as for security reasons you can't simply reference a local image in HTML...</p>
  
  <pre><code>&lt;div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 col-xl-5"&gt;
  &lt;img src="@Model.ImagePath[outer]" class="img-responsive" id="@("ProductImage" + outer.ToString())" /&gt;
  @if (Model.PreviewMode == false)
  {
      &lt;div style="position:absolute; bottom:60px"&gt;
           @Html.TextBoxFor(m =&gt; m.ImageFiles[outer], new { type = "file", onchange = ("PreviewImage('" + outer.ToString() + "')"), id = ("ProductImageUpload" + outer.ToString()) })
      &lt;/div&gt;
   }
  </code></pre>
  
  <p></p>
  
  <p>So this is a snippet of HTML from my project, as I am sure you guessed it comes out of a loop where <code>outer</code> was one of the controlling variables.</p>
  
  <pre><code>    &lt;script&gt;
      function PreviewImage() {
          // Where you will display your image
          var preview = document.querySelector('img');
          // The button where the user chooses the local image to display
          var file = document.querySelector('input[type=file]').files[0];
  
          // FileReader instance
          var reader = new FileReader();
  
          // When the image is loaded we will set it as source of
          // our img tag
          reader.onloadend = function () {
              preview.src = reader.result;
          }
  
  
          if (file) {
              // Load image as a base64 encoded URI
              reader.readAsDataURL(file);
          }
          else {
              preview.src = "";
          }
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I got this code from another post and it works quite well for a single image, but for some reason as soon as I have multiple image and image inputs it stops working.</p>
  
  <p>I would imagine somehow manually selecting the source and destination (by passing in an ID to the function)</p>
  
  <p>Something like this:</p>
  
  <pre><code>var file = document.getElementById("ProductImageUpload" + ID).files[0];
  </code></pre>
  
  <p>Does anyone know how I could accomplish this?</p>