title: Javascript, Uploading multiple files
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
    $(document).on('click', "button", function (e) {
        $(this).closest('tr').remove();
    });
  });
  var filelist = new Array();
  
  updateList = function () {
    var input = document.getElementById('fileUploader');
    var output = document.getElementById('divFiles');
  
    var HTML = "&lt;table&gt;";
    for (var i = 0; i &lt; input.files.length; ++i) {
        filelist[i] = input.files.item(i).name;
        HTML += "&lt;tr&gt;&lt;td&gt;" + filelist[i] + "&lt;/td&gt;&lt;td&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;button &gt;&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;";
    }
  
    HTML += "&lt;/table&gt;";
    output.innerHTML = HTML;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="form-group col-md-2 col-sm-2"&gt;
   &lt;label class="label1"&gt;
    &lt;img src="~/Images/upload.png" height="50px" width="50px" /&gt; Upload Your File
    &lt;input type="file" name="fileUploader" id="fileUploader" multiple onchange="javascript:updateList()" /&gt;
   &lt;/label&gt;
  &lt;/div&gt;
  &lt;br /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In the code I am uploading multiple files. When I am trying to upload some more files the existing file list replaced with new list. Even after placing my array outside the function. 
  <a href="https://i.stack.imgur.com/4jDzp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4jDzp.png" alt="enter image description here"></a></p>