изменить поведение элемента ввода с тегом «несколько»

Question

У меня есть форма, в которой я хочу, чтобы пользователь загружал несколько фотографий.обычно, когда я выбираю несколько файлов одновременно, все работает нормально.но проблема в том, что если пользователь хочет добавлять изображения одно за другим, после каждого добавления предыдущий файл удаляется (так как длина файлов после каждого добавления равна 1).Как это исправить?спасибо

$("#files").change(function(){
  console.log("the length of files: ", $("#files")[0].files.length); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="file" name="" id="files" multiple>
</form>

Answer 1

Вы можете сохранить массив файлов и добавить каждый файл в этот массив.Таким образом, у вас будет промежуточная сумма всех добавленных файлов.Проблема с вашим текущим подходом заключается в том, что ваши файлы перезаписываются при каждой загрузке, таким образом, сохранение их в массив является одним из способов.

См. Рабочий пример ниже:

let uploaded_files = [];
$("#files").change(function(){
  let currentFiles = $("#files")[0].files;
  uploaded_files = [...uploaded_files, ...currentFiles];
  console.log(uploaded_files.length); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="file" name="" id="files" multiple>
</form>

Answer 2

Проблема в том, что тег <input> действует здесь «атомарно».Что бы вы ни выбрали, вы выбираете.Если вы хотите добавить другие элементы позже, вам придется либо использовать плагин (как предложено), либо справиться с этим самостоятельно.

let allFiles = [];
$('#files').change(function() {
  this.allFiles = this.allFiles.concat($("#files")[0].files);
  showFileNames();
});

Обратите внимание, как я уже сказал, что файлы "объединены с переменной allFiles.

Кроме того, функция showFileNames может отображать все файлы или, например, только имена файлов в таблицу, список или что-то еще.И для каждого файла у вас также может быть «x», чтобы удалить его.

Теперь, когда вы отправляете форму позже, вы используете allFiles вместо этого ввода напрямую, например, создавая FormData самостоятельно.