XMLHttpRequestオブジェクトを使ってAjaxでファイルアップロードを行う

2024-04-02

Ajaxを使用してフォームにデータとファイルをアップロードする

必要なもの

HTMLファイル
JavaScriptファイル
jQueryライブラリ
サーバサイドスクリプト（PHP、Python、Rubyなど）

手順

HTMLフォームの作成

<form id="my-form" method="post" enctype="multipart/form-data">
  <input type="file" name="file" />
  <input type="text" name="name" />
  <input type="submit" value="送信" />
</form>

jQueryを使用してAjaxリクエストを送信

$(document).ready(function() {
  $("#my-form").submit(function(e) {
    e.preventDefault();

    var formData = new FormData(this);

    $.ajax({
      url: "/upload.php",
      type: "post",
      data: formData,
      contentType: false,
      processData: false,
      success: function(response) {
        // アップロード成功時の処理
      },
      error: function(jqXHR, textStatus, errorThrown) {
        // アップロード失敗時の処理
      }
    });
  });
});

<?php

// ファイルの保存
$file = $_FILES['file'];
move_uploaded_file($file['tmp_name'], "uploads/" . $file['name']);

// データの処理
$name = $_POST['name'];

// ...

?>

注意事項

enctype="multipart/form-data"属性をフォームに追加する必要があります。
contentTypeとprocessDataオプションをfalseに設定する必要があります。

このチュートリアルでは、基本的なファイルアップロードのみを扱っています。
プログレスバーの表示や、エラー処理など、より高度な機能を追加することもできます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <form id="my-form" method="post" enctype="multipart/form-data">
    <input type="file" name="file" />
    <input type="text" name="name" />
    <input type="submit" value="送信" />
  </form>

  <script>
  $(document).ready(function() {
    $("#my-form").submit(function(e) {
      e.preventDefault();

      var formData = new FormData(this);

      $.ajax({
        url: "/upload.php",
        type: "post",
        data: formData,
        contentType: false,
        processData: false,
        success: function(response) {
          // アップロード成功時の処理
          alert("アップロードが完了しました。");
        },
        error: function(jqXHR, textStatus, errorThrown) {
          // アップロード失敗時の処理
          alert("アップロードに失敗しました。");
        }
      });
    });
  });
  </script>
</body>
</html>

PHP

<?php

// ファイルの保存
$file = $_FILES['file'];
move_uploaded_file($file['tmp_name'], "uploads/" . $file['name']);

// データの処理
$name = $_POST['name'];

// ...

?>

実行方法

上記のコードをHTMLファイルとPHPファイルに保存します。
HTMLファイルをブラウザで開きます。
ファイルと名前を入力して、「送信」ボタンをクリックします。
アップロードが成功すると、「アップロードが完了しました。」というメッセージが表示されます。

上記のコードはサンプルです。必要に応じて修正してください。
サーバの設定によっては、ファイルアップロードが制限されている場合があります。

Ajaxを使用してフォームにデータとファイルをアップロードする他の方法

ここでは、他の方法を紹介します。

XMLHttpRequestオブジェクトを使用する

jQueryを使用せずに、XMLHttpRequestオブジェクトを使用してAjaxリクエストを送信できます。

var xhr = new XMLHttpRequest();
xhr.open("post", "/upload.php");
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.send(formData);

xhr.onload = function() {
  if (xhr.status === 200) {
    // アップロード成功時の処理
  } else {
    // アップロード失敗時の処理
  }
};

Fetch APIを使用して、Ajaxリクエストを送信できます。

fetch("/upload.php", {
  method: "post",
  body: formData
})
.then(function(response) {
  if (response.status === 200) {
    // アップロード成功時の処理
  } else {
    // アップロード失敗時の処理
  }
});