Ввод 'FILE' не сохраняет первый выбранный элемент после второй попытки (загрузка нескольких файлов)

Question

Мне нравится загружать несколько файлов, поэтому я создал файл HTML, как показано ниже,

<label>Please upload text, image, or pdf file</label>
<input type="file" name="files[]" multiple="true" autocomplete="off" required>

Я написал api, используя Flask, и он работает по назначению. Если я выберу файлы с первой попытки, проблем нет. Однако, если я выбираю файл в первый раз, а затем снова пытаюсь поместить другой файл, первый загруженный файл будет перезаписан вторым файлом. С точки зрения серверной части моего проекта проблем нет, но на стороне клиента я не мог загружать файлы друг за другом из-за проблемы с перезаписью.

Для визуализации это моя первая попытка;

Это вторая попытка, она перезаписывает первую загрузку;

Но если я хочу загрузить их за один раз, я могу сделать это, как показано ниже.

Я хочу иметь возможность добавлять свои файлы один за другим. Есть ли какой-нибудь подход, который я могу попробовать?

Answer 1

Это невозможно сделать с атрибутом multiple="true".

Если указан множественный логический атрибут, ввод файла позволяет пользователю выбрать более одного файла.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Additional_attributes

Если пользователь загружает файл (ы), а затем переходит на загрузку снова, не имеет ли смысла перезаписывать первый файл, как и вы? испытываете? Однако вы можете сделать это с помощью загрузки файлов jQuery или AJAX.

Попробуйте этот или этот , который выполняет то, что вы хотите достичь.