Javascript，上传多个文件

Question

$(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 = "<table>";
  for (var i = 0; i < input.files.length; ++i) {
      filelist[i] = input.files.item(i).name;
      HTML += "<tr><td>" + filelist[i] + "</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button ></button></td></tr>";
  }

  HTML += "</table>";
  output.innerHTML = HTML;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group col-md-2 col-sm-2">
	<label class="label1">
		<img src="~/Images/upload.png" height="50px" width="50px" /> Upload Your File
		<input type="file" name="fileUploader" id="fileUploader" multiple onchange="javascript:updateList()" />
	</label>
</div>
<br />

在代码中我上传了多个文件。当我尝试上传更多文件时，现有文件列表已替换为新列表。即使将我的数组放在函数之外。

Answer 1

如果您想保留之前添加的文件名，您应该将文件名push 到filelist 中。

var filelist = new Array();

updateList = function () {
    var input = document.getElementById('fileUploader');
    var output = document.getElementById('divFiles');

    var HTML = "<table>";
    for (var i = 0; i < input.files.length; ++i) {
        //filelist[i] = input.files.item(i).name;
        filelist.push(input.files.item(i).name);
        HTML += "<tr><td>" 
              + filelist[i] 
              + "</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button ></button></td></tr>";
    }
    HTML += "</table>";
    output.innerHTML = HTML;
    console.log(filelist);
}

<input id="fileUploader" type="file" multiple="multiple" onchange="updateList()">
<div id="divFiles"></div>