javascript formData.entries() 为空，但输入及其名称已定义。如何解决？

Question

当我更改图像时，它会触发表单提交事件。我想使用 ajax 发布图像，正如您所看到的，我正在使用 formData 提取表单值。但我无法检索表单数据，当我循环 formData 条目时，不会打印任何内容。

$('.image-input-desktop').on('change', (event) => {
    event.preventDefault();
    $('#image_upload_desktop').trigger('submit');
})

$('#image_upload_desktop').on('submit', (event) => {
    event.preventDefault();
    console.log('Form submitted');
    let formData = new FormData(this);
    for (var [key, value] of formData.entries()) {
        console.log(key, value);
    };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="image_upload_desktop" method="POST" enctype="multipart/form-data">
   <input type="file" name="image" class="image-input-desktop">
</form>

Answer 1

您的代码的问题是它使用 arrow function ，因此您传递给 FormData 的 this 参数实际上是 window。

您可以通过event.target获取对form元素的引用

$('.image-input-desktop').on('change', (event) => {
  event.preventDefault();
  $('#image_upload_desktop').trigger('submit');
})

$('#image_upload_desktop').on('submit', (event) => {
  event.preventDefault();
  console.log(this === window);
  console.log('Form submitted');
  debugger;
  let formData = new FormData(event.target);
  for (var [key, value] of formData.entries()) {
    console.log(key, value);
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="image_upload_desktop" method="POST" enctype="multipart/form-data">
  <input type="file" name="image" class="image-input-desktop">
</form>