js formdata遍历

const formData = new FormData();
formData.append('username', 'JohnDoe');
formData.append('avatar', fileInput.files[0]); // 假设 fileInput 是一个文件输入元素

for (const [key, value] of formData.entries()) {
  console.log(`Key: ${key}, Value: ${value}`);
}

Array.from(formData.entries()).forEach(([key, value]) => {
  console.log(`Key: ${key}, Value: ${value}`);
});

// 遍历键
for (const key of formData.keys()) {
  console.log(`Key: ${key}`);
}

// 遍历值
for (const value of formData.values()) {
  console.log(`Value: ${value}`);
}

<form id="myForm">
  <input type="text" name="username" value="JohnDoe">
  <input type="file" name="avatar">
  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  const formData = new FormData(this);

  for (const [key, value] of formData.entries()) {
    console.log(`Key: ${key}, Value: ${value}`);
  }

  // 使用 fetch API 发送数据
  fetch('/upload', {
    method: 'POST',
    body: formData
  }).then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
});
</script>