title: Differentiate between multiple dynamic fileupload controls
body: <p>I'm dynamically adding multiple fileuploads to my asp.net page.
  The user is able to create and delete these fileuploads from the page. The code for this is written in Javascript / JQuery:</p>
  
  <pre><code>var opleverpuntCounter = 0;
          function addOpleverpunt() {
              var $opleverpuntContainer = $('#opleverpuntContainer');
              var div = '';
              var divId = 'opleverpunt_' + opleverpuntCounter;
              div = '&lt;div id="' + divId + '"&gt;&lt;br /&gt;Upload afbeelding situatie vooraf &lt;input id="opleverpuntbeforefile_' + opleverpuntCounter + '" name="opleverpuntbeforefile_' + opleverpuntCounter + '" type="file" accept="image/*" capture="camera" /&gt;&lt;br /&gt;&lt;label for="opleverpuntdescriptionbefore_' + opleverpuntCounter + '"&gt;Situatie omschrijving vooraf&lt;/label&gt;&lt;br /&gt;&lt;textarea type="text" id="opleverpuntdescriptionbefore_' + opleverpuntCounter + '" name="opleverpuntdescriptionbefore_' + opleverpuntCounter + '" rows="5" cols="100"&gt;&lt;/textarea&gt;&lt;br /&gt;Upload afbeelding situatie achteraf &lt;input id="opleverpuntafterfile_' + opleverpuntCounter + '" name="opleverpuntafterfile_' + opleverpuntCounter + '" type="file" accept="image/*" capture="camera" /&gt;&lt;br /&gt;&lt;label for="opleverpuntdescriptionafter_' + opleverpuntCounter + '"&gt;Situatie omschrijving achteraf&lt;/label&gt;&lt;br /&gt;&lt;textarea type="text" id="opleverpuntdescriptionafter_' + opleverpuntCounter + '" name="opleverpuntdescriptionafter_' + opleverpuntCounter + '" rows="5" cols="100"&gt;&lt;/textarea&gt;&lt;br /&gt;&lt;input id="btn_' + opleverpuntCounter + '" type="button" value="REMOVE X" class="smallButton" /&gt;&lt;/div&gt;';
              $opleverpuntContainer.append(div);
              $('#btn_' + opleverpuntCounter).click(function () { removeOpleverpunt(divId); });
              opleverpuntCounter++;
          }
          function removeOpleverpunt(element) {
              var $element = $('#' + element);
              $element.remove();
          }
  </code></pre>
  
  <p>It adds 2 fileupload controls on each <code>addOpleverpunt()</code> call. The <code>name</code> and <code>id</code> are both generated and unique for each fileupload.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="opleverpuntContainer"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Back at server-side I use following code to get and store the uploaded files:</p>
  
  <pre><code>for (int i = 0; i &lt;= Request.Files.Count - 1; i++) {
      HttpPostedFile PostedFile = Request.Files(i);
      if (PostedFile.ContentLength &gt; 0) {
          //Store PostedFile here
          //(Left out to improve question readability)
      }
  }
  </code></pre>
  
  <p>The fileuploads aren't ASP:FileUpload controls but regular input FileUpload controls.</p>
  
  <p>Is there any way to differentiate between <code>opleverpuntbeforefile_x</code> and <code>opleverpuntafterfile_x</code>? (<code>x</code> is the generated number)</p>
  
  <p>If I'm able to get the difference at serverside, I will be able to store <code>opleverpuntbeforefile</code> in one entity and <code>opleverpuntafterfile</code> in another.</p>
  
  <p>Suggestions and answers in either C# or VB.NET are fine.</p>