FormDataとXMLHttpRequestを使ったファイルアップロード

2024-04-05

jQueryでファイルを非同期的にアップロードする方法

$.ajax()を使ってファイルを非同期的にアップロードするには、以下の手順が必要です。

input type="file"要素を用意します。
$.ajax()を使って、フォームデータをサーバーに送信します。
サーバー側でアップロードされたファイルを受け取り、処理します。

以下のコード例は、$.ajax()を使ってファイルを非同期的にアップロードする方法を示しています。

<input type="file" id="file">

$(document).ready(function() {
  $('#file').on('change', function() {
    var formData = new FormData();
    formData.append('file', $(this)[0].files[0]);

    $.ajax({
      url: '/upload',
      type: 'POST',
      data: formData,
      contentType: false,
      processData: false,
      success: function(data) {
        // アップロード成功時の処理
      },
      error: function(xhr, status, error) {
        // アップロード失敗時の処理
      }
    });
  });
});

jQuery File Uploadは、ファイルを非同期的にアップロードするためのjQueryプラグインです。$.ajax()を使うよりも簡単にファイルアップロードを実装することができます。

<input type="file" id="file">

$(document).ready(function() {
  $('#file').fileupload({
    url: '/upload',
    dataType: 'json',
    success: function(data) {
      // アップロード成功時の処理
    },
    error: function(xhr, status, error) {
      // アップロード失敗時の処理
    }
  });
});

簡単なファイルアップロードの場合は、$.ajax()を使う方法で十分です。
複雑なファイルアップロード機能が必要な場合は、jQuery File Uploadを使うと便利です。

<!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>
  <h1>ファイルアップロード</h1>
  <input type="file" id="file">
  <button id="upload">アップロード</button>

  <script>
  $(document).ready(function() {
    $('#upload').on('click', function() {
      var formData = new FormData();
      formData.append('file', $('#file')[0].files[0]);

      $.ajax({
        url: '/upload',
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        success: function(data) {
          // アップロード成功時の処理
          alert('アップロード成功!');
        },
        error: function(xhr, status, error) {
          // アップロード失敗時の処理
          alert('アップロード失敗!');
        }
      });
    });
  });
  </script>
</body>
</html>

このコードを保存してブラウザで開くと、ファイルを選択してアップロードできるようになります。

以下のコード例は、PHPを使ってアップロードされたファイルを受け取り、処理する方法を示しています。

<?php

// アップロードされたファイルの保存先
$upload_dir = './uploads/';

// ファイル情報の取得
$file_name = $_FILES['file']['name'];
$file_tmp_name = $_FILES['file']['tmp_name'];
$file_size = $_FILES['file']['size'];
$file_type = $_FILES['file']['type'];

// ファイルの移動
move_uploaded_file($file_tmp_name, $upload_dir . $file_name);

// アップロード成功時の処理
echo 'アップロード成功!';

?>

このコードを保存して、$.ajax()で指定したURLに配置します。

注意事項

アップロードできるファイルサイズやファイルの種類は、サーバーの設定によって制限されます。
セキュリティ対策のため、アップロードされたファイルの拡張子を検証するなど、適切な対策を講じる必要があります。

jQueryでファイルを非同期的にアップロードする他の方法

$.ajax()を使う方法以外にも、FormDataとXMLHttpRequestを使ってファイルを非同期的にアップロードすることができます。

<input type="file" id="file">

$(document).ready(function() {
  $('#file').on('change', function() {
    var formData = new FormData();
    formData.append('file', $(this)[0].files[0]);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload');
    xhr.onload = function() {
      if (xhr.status === 200) {
        // アップロード成功時の処理
      } else {
        // アップロード失敗時の処理
      }
    };
    xhr.send(formData);
  });
});

iframeを使ってファイルを非同期的にアップロードすることができます。

<iframe id="upload_frame" name="upload_frame" src="about:blank"></iframe>

<form action="/upload" method="post" enctype="multipart/form-data" target="upload_frame">
  <input type="file" name="file">
  <input type="submit" value="アップロード">
</form>