It is necessary to collect data from the form on the files for further transfer by AJAX to the server.

<form id="upload-docs" name="uploadDocs"> <div class="field-upload"> <label for="file1">Файл1:</label> <input id="file1" name="file1" type="file" accept=".xlsx,.xls,image/*,.doc, .docx,.ppt, .pptx,.txt,.pdf"> </div> <div class="field-upload"> <label for="file2">Файл 2:</label> <input id="file2" name="file2" type="file" accept=".xlsx,.xls,image/*,.doc, .docx,.ppt, .pptx,.txt,.pdf"> </div> <input type="submit" value="Загрузить файлы"> </form>

Collect data in this way

 $('form#upload-docs input').each(function() { formData.append(this.name, $(this).prop('files')[0]); });

If collected separately from each input, i.e.

 formData.append('file1', $('file1').prop('files')[0]); formData.append('file2', $('file2').prop('files')[0]);

That all works. If I do through each then the result is an error Uncaught TypeError: Cannot read property '0' of null .

Ideally, it is necessary to collect data in the form of an object so that the server can access such files['file1'][name] .

    1 answer 1

    You capture extra input with type="submit" .

     $('form#upload-docs input[type="file"]').each(function() {