Форма с несколькими входами файла

Question

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

У каждого человека есть свой входной файл, и он может добавить еще 2 ввода динамически c.

<div id="InputsWrapper_1">
<div><input type="file" name="arquivoDep_1_[]" id="1" value="" multiple><a href="#" class="removeclass"></a></div>
</div>

<div id="AddMoreFileId_1">
<a href="#" id="AddMoreFileBox_1" class="btn btn-info adiciona">Add field</a><br><br>
</div>
<div id="lineBreak"></div>

 <div id="InputsWrapper_2">
<div><input type="file" name="arquivoDep_2_[]" id="2" value="" multiple><a href="#" class="removeclass"></a></div>
</div>

<div id="AddMoreFileId_2">
<a href="#" id="AddMoreFileBox_2" class="btn btn-info adiciona">Add field</a><br><br>
</div>

Когда я отправляю эту форму, я получаю ответ

<input id="1" type="file" name="arquivoDep_1_[]" value="" multiple="">
<input type="file" name="arquivoDep_1_[]">

<input id="2" type="file" name="arquivoDep_2_[]" value="" multiple="">
<input type="file" name="arquivoDep_2_[]">

Это нормально. Два файла для двух человек.

Как я могу добавить эти файлы .. что-то вроде

$.each($("input[type=file]"), function(i, obj) 
{
    $.each(obj.files,function(j, file)
    {
        form_data.append('arquivoDep_x_[]', file, file.name);
    })
});

Answer 1

Сначала мы в 2020 году, проверьте, действительно ли вам нужно jQuery: http://youmightnotneedjquery.com/

Затем вы можете использовать данные из нескольких частей, например:

<script type="text/javascript">
  const formElement = document.querySelector('form');

  formElement.addEventListener('submit', e => {
    e.preventDefault();

    const request = new XMLHttpRequest();

    const formData = new FormData();

    const formElements = formElement.elements;

    const data = {};

    for (let i = 0; i < formElements.length; i++) {
      const currentElement = formElements[i];
      if (!['submit', 'file'].includes(currentElement.type)) {
        data[currentElement.name] = currentElement.value;
      } else if (currentElement.type === 'file') {
        if (currentElement.files.length === 1) {
          const file = currentElement.files[0];
          formData.append(`files.${currentElement.name}`, file, file.name);
        } else {
          for (let i = 0; i < currentElement.files.length; i++) {
            const file = currentElement.files[i];

            formData.append(`files.${currentElement.name}`, file, file.name);
          }
        }
      }
    }

    formData.append('data', JSON.stringify(data));

    request.open('POST', 'https://example.com');

    request.send(formData);
  });
</script>

Источник: Загрузить | Документация Страпи