附加要通过HTML Input Type =具有多个属性的文件上传的其他文件

Question

我有一个HTML表单，试图通过属性为<input type=file>的标准“选择文件” multiple按钮或通过拖放多个文件来上传多个文件。我希望能够有一个文件数组（在输入名称中在此处声明），可以将其添加到某人选择或拖放文件的任意多次中。但是，每次尝试上传多个文件时，都会删除以前添加的文件，并将数组返回零。

HTML

<form id="uploadbanner" enctype="multipart/form-data" action="{{ url_for('set_records.add_files') }}" method="POST">
<h3>Choose file(s)</h3>
<div>
  <input id="files-upload" type="file" multiple name="files-upload[]">
</div>
<div id="drop-area">
  <div class="drop-instructions">or drag and drop files here</div>
</div>
<input type="submit" value="Upload Files" />
</form>

JavaScript （仅相关部分）

var filesUpload = document.getElementById("files-upload"),
dropArea = document.getElementById("drop-area"),
fileList = document.getElementById('new-uploaded').getElementsByTagName('tbody')[0];

function traverseFiles (files) {
var formData = new FormData($("#uploadbanner")[0]);
    for (var i = 0, len = document.getElementById('files-upload').files.length; i < len; i++) {
        formData.append("files-upload"+(i+1), document.getElementById('files-upload').files[i]);
    }
    console.table( files ); //shows the array of files currently selected for upload
}

filesUpload.addEventListener("change", function () {
traverseFiles(this.files);
}, false);

dropArea.addEventListener("drop", function (evt) {
traverseFiles(evt.dataTransfer.files);
evt.preventDefault();
evt.stopPropagation();
}, false);

无论我尝试选择/拖放/拖放其他文件并简单地追加到数组中多少次，如何维护选择的要上传的文件？感谢您的帮助。

编辑，添加了三个尝试添加多个文件的示例，控制台表结果表明每次尝试都将覆盖该数组：