【JavaScript】FormDataの使い方｜Ajax送信・append/set・ファイルアップロード・進捗・Content-Typeの注意まで

<form id="my-form">
  <input type="text"  name="username" value="Taro">
  <input type="email" name="email"    value="taro@example.com">
  <input type="file"  name="avatar">
</form>

const form = document.getElementById("my-form");
const formData = new FormData(form);

// console.log(formData) では中身が見えないので entries() で確認
for (const [key, value] of formData.entries()) {
  console.log(key, value);
}

const data = new FormData();

data.append("tag", "js");   // 追加
data.append("tag", "web");  // 同じキーで複数追加できる
data.set("tag", "css");     // set は上書き（既存の tag を全部消して1つに）

data.get("tag");     // "css"（最初の値を1つ返す）
data.getAll("tag");  // ["css"]（同じキーの全値を配列で）
data.has("email");   // false（キーがあるか）
data.delete("tag");  // 削除

// 数値は文字列に変換される
data.append("age", 25); // "25" として保存される

const formData = new FormData(form);

const obj = Object.fromEntries(formData);
console.log(obj); // { username: "Taro", email: "taro@example.com", ... }

// 注意: 同じ name が複数あると最後の値だけになる（複数は getAll を使う）

const form = document.getElementById("my-form");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const formData = new FormData(form);

  fetch("/submit.php", {
    method: "POST",
    body: formData, // Content-Type は自動設定される
  })
    .then((res) => res.text())
    .then((result) => console.log("成功:", result))
    .catch((error) => console.error("エラー:", error));
});

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const formData = new FormData(form);

  formData.append("timestamp", Date.now()); // 自動で値を追加

  fetch("/submit.php", { method: "POST", body: formData });
});

// urlencoded（ファイル不可・テキストのみ）
const params = new URLSearchParams(new FormData(form));
fetch("/submit.php", { method: "POST", body: params });

// JSON で送る場合は明示的に変換する
fetch("/api", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(Object.fromEntries(new FormData(form))),
});

const fileInput = document.querySelector('input[type="file"][multiple]');
const formData = new FormData();

for (const file of fileInput.files) {
  formData.append("files[]", file); // PHP では $_FILES["files"] に配列で届く
}

const xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", (e) => {
  if (e.lengthComputable) {
    const percent = Math.round((e.loaded / e.total) * 100);
    console.log(`アップロード: ${percent}%`);
  }
});

xhr.open("POST", "/upload.php");
xhr.send(new FormData(form));

<?php
$username = $_POST["username"] ?? "";
$email    = $_POST["email"] ?? "";
$file     = $_FILES["avatar"] ?? null;

// アップロード成功時のみ保存（拡張子・サイズ検証は別途必須）
if ($file && $file["error"] === UPLOAD_ERR_OK) {
  move_uploaded_file($file["tmp_name"], "uploads/" . basename($file["name"]));
}

echo "名前: {$username}, メール: {$email}";