从多个输入获取多个文件上传并将它们附加到表单数据

Question

我的 HTML 页面中的一个表单包含以下 3 个字段，可用于上传 3 个单独的文件。

<div class="form-group">
            <label>Important Property Documents Upload</label>
            <input type="file" id="update_importantdocupload" name="update_importantdocupload" class="form-control" placeholder="Upload a Compressed file will necessary documents included." required>
        <div class="form-group">
            <label>Important Property Documents Upload</label>
            <input type="file" id="add_importantdocupload" name="add_importantdocupload" class="form-control file_upload" placeholder="Upload a Compressed file will necessary documents included." required>
        </div>
        
        <div class="form-group">
            <label>Property Cover Image</label>
            <input type="file" id="add_propertycoverimage" name="add_propertycoverimage" class="form-control file_upload" placeholder="Upload a Cover Image" required>
        </div>
        
        <div class="form-group">
            <label>Other Property Images</label>
            <input type="file" id="add_propertyotherimages" name="add_propertyotherimages" class="form-control file_upload" placeholder="Compress All Property Images and Upload" required>
        </div>

上传文件后，我使用以下 Javascript 代码获取上传的文件并将它们附加到表单数据的其余部分。（类必须使用，因为只起草了 1 API 代码来上传文件）

    let formData = new FormData();

for (let file of document.getElementsByClassName('file_upload').files) {
    formData.append("files", file);
}

但这会抛出一个错误，指出这是不可迭代的。

解决此问题的最佳方法是什么？

提前致谢！

Answer 1

getElementsByClassName returns 具有所有给定 class 名称的所有子元素的 array-like 对象。 ^ref

重要的关键字是array-like...要对其进行迭代，您需要一个真正的数组。所以你可以使用 Array.from().

然后，对于每个元素，您需要文件数组的第一个文件。

我也用了FormData.getAll()只是为了console.log结果...

document.getElementById("test").addEventListener("click", function() {

  let formData = new FormData();

  for (let inputElement of Array.from(document.getElementsByClassName('file_upload'))) {
    formData.append("files", inputElement.files[0]);
  }

  console.log(formData.getAll("files"))

})

<div class="form-group">
  <label>Important Property Documents Upload</label>
  <input type="file" id="update_importantdocupload" name="update_importantdocupload" class="form-control" placeholder="Upload a Compressed file will necessary documents included." required>
  <div class="form-group">
    <label>Important Property Documents Upload</label>
    <input type="file" id="add_importantdocupload" name="add_importantdocupload" class="form-control file_upload" placeholder="Upload a Compressed file will necessary documents included." required>
  </div>

  <div class="form-group">
    <label>Property Cover Image</label>
    <input type="file" id="add_propertycoverimage" name="add_propertycoverimage" class="form-control file_upload" placeholder="Upload a Cover Image" required>
  </div>

  <div class="form-group">
    <label>Other Property Images</label>
    <input type="file" id="add_propertyotherimages" name="add_propertyotherimages" class="form-control file_upload" placeholder="Compress All Property Images and Upload" required>
  </div>

</div>

<br>
<button id="test">Append to FormData</button>

从多个输入获取多个文件上传并将它们附加到表单数据

Get multiple file uploads from multiple inputs and appending them to form data

html

javascript

jquery