通过文件上传从表单中收集数据

有必要从表单中收集有关文件的数据，以便通过 AJAX 将其进一步传输到服务器。

<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>

我以这种方式收集数据

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

如果您从每个输入中单独收集，即

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

这一切都有效。如果我通过each那么结果是错误的Uncaught TypeError: Cannot read property '0' of null。

理想情况下，您需要以对象的形式收集数据，以便服务器进行这样的调用files['file1'][name]。