У меня есть 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);
Как сохранить выбранные файлы для загрузки, независимо от того, сколько раз я пытаюсь выбрать / перетащить / удалить дополнительные файлы и просто добавить их в массив? Спасибо за вашу помощь здесь.
РЕДАКТИРОВАТЬ Добавление примера трех попыток добавления нескольких файлов и результатов таблицы консоли, демонстрирующих, что массив перезаписывается при каждой попытке:
