HTML・CSS・JavaScriptで実装するシンプルなファイルアップロード機能の作り方

Webサイトでユーザーからファイルを受け取りたいときに活用するのが「ファイルアップロード機能」です。たとえば、履歴書の提出、プロフィール画像の登録、書類の添付など、さまざまな場面で求められます。本記事では、HTML・CSS・JavaScriptだけで構成された基本的なファイルアップロードの仕組みをわかりやすく解説します。初心者でも手を動かしながら理解できるように、サンプルコードを使って手順を一つひとつ紹介していきます。

---

HTMLでファイルアップロードの入力フォームを作成する

ファイルアップロードの入力欄は、HTMLの<input type="file">タグを使うことで簡単に作れます。以下は基本的なフォームの例です。

<form id="uploadForm">
  <label for="fileInput">ファイルを選択：</label>
  <input type="file" id="fileInput" name="myFile">
  <button type="submit">アップロード</button>
</form>

このようにすることで、ユーザーはローカルのファイルを選択できます。accept属性を追加することで、特定のファイルタイプ（画像、PDFなど）だけを選択可能にすることもできます。

htmlコピーする編集する<input type="file" accept="image/*,.pdf">

---

CSSでファイルアップロードフォームをスタイリングする

デフォルトのファイルアップロードボタンはブラウザ依存のデザインなので、CSSでカスタマイズすると見た目が良くなります。以下は基本的なスタイルの例です。

form {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  display: inline-block;
}

input[type="file"] {
  margin-bottom: 10px;
}

button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

これにより、ファイル選択とアップロードボタンが整ったデザインになります。

---

JavaScriptでファイル選択時の処理を追加する

JavaScriptを使うと、ファイル選択時に情報を取得したり、バリデーションを加えたり、プレビュー表示をすることが可能です。

ファイル選択時のファイル名を表示する例

const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", function () {
  const file = fileInput.files[0];
  if (file) {
    alert(`選択されたファイル：${file.name}`);
  }
});

複数ファイル対応の実装

<input type="file" id="fileInput" name="myFiles" multiple>

JavaScript側でもすべてのファイルにアクセスできます：

javascriptコピーする編集するconst files = fileInput.files;
for (let i = 0; i < files.length; i++) {
  console.log(files[i].name);
}

---

画像ファイルのプレビューを表示する

画像をアップロードする機能では、プレビューがあるとユーザーに優しいUIになります。以下のようにFileReaderを使って画像を表示することができます。

<img id="preview" src="#" alt="プレビュー" style="max-width: 200px; display: none;">

fileInput.addEventListener("change", function () {
  const file = this.files[0];
  if (file && file.type.startsWith("image/")) {
    const reader = new FileReader();
    reader.onload = function (e) {
      const preview = document.getElementById("preview");
      preview.src = e.target.result;
      preview.style.display = "block";
    };
    reader.readAsDataURL(file);
  }
});

---

実際にサーバーにファイルを送信する（JavaScript Fetch API編）

HTMLとJSだけで完結する操作は限られますが、サーバーにファイルを送るにはJavaScriptのFormDataとfetchを使って送信できます。

document.getElementById("uploadForm").addEventListener("submit", function (e) {
  e.preventDefault();
  const formData = new FormData();
  const file = fileInput.files[0];

  if (!file) {
    alert("ファイルを選択してください。");
    return;
  }

  formData.append("myFile", file);

  fetch("/upload", {
    method: "POST",
    body: formData
  })
    .then(response => {
      if (response.ok) {
        alert("アップロード成功！");
      } else {
        alert("アップロード失敗！");
      }
    })
    .catch(error => {
      console.error("エラー:", error);
    });
});

※ /uploadは受け取り処理をするサーバーサイドのエンドポイントです（PHP, Node.js, Pythonなどで用意）。

---

ファイルサイズや拡張子をチェックする方法

JavaScriptでバリデーションを追加すると、不要なアップロードを防ぐことができます。

fileInput.addEventListener("change", function () {
  const file = this.files[0];
  if (file.size > 2 * 1024 * 1024) {
    alert("2MB以下のファイルを選択してください。");
    this.value = ""; // リセット
  }

  const allowedExtensions = ["jpg", "jpeg", "png", "pdf"];
  const fileExtension = file.name.split('.').pop().toLowerCase();
  if (!allowedExtensions.includes(fileExtension)) {
    alert("対応していないファイル形式です。");
    this.value = "";
  }
});

---

以下に、HTML・CSS・JavaScriptで作成したファイルアップロード機能に対応するPHP側の処理を紹介します。セキュリティ面にも配慮しつつ、アップロードされたファイルをサーバーの指定ディレクトリに保存するシンプルな例です。

---

PHPファイルアップロード処理（upload.php）

<?php
// アップロード先のディレクトリ
$uploadDir = __DIR__ . '/uploads/';

// アップロードディレクトリがなければ作成
if (!is_dir($uploadDir)) {
    mkdir($uploadDir, 0755, true);
}

// ファイルが送信されたか確認
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_FILES['myFile']) && $_FILES['myFile']['error'] === UPLOAD_ERR_OK) {

        $fileTmpPath = $_FILES['myFile']['tmp_name'];
        $fileName = $_FILES['myFile']['name'];
        $fileSize = $_FILES['myFile']['size'];
        $fileType = $_FILES['myFile']['type'];

        // ファイル名から拡張子を取得
        $fileExtension = strtolower(pathinfo($fileName, PATHINFO_EXTENSION));

        // アップロードを許可する拡張子のリスト
        $allowedExtensions = ['jpg', 'jpeg', 'png', 'pdf'];

        if (!in_array($fileExtension, $allowedExtensions)) {
            http_response_code(400);
            echo json_encode(['error' => '許可されていないファイル形式です。']);
            exit;
        }

        // ファイルサイズ制限（例：2MB）
        if ($fileSize > 2 * 1024 * 1024) {
            http_response_code(400);
            echo json_encode(['error' => 'ファイルサイズが2MBを超えています。']);
            exit;
        }

        // ファイル名をユニークにする（衝突防止）
        $newFileName = uniqid('upload_', true) . '.' . $fileExtension;

        // 保存先パスを作成
        $destPath = $uploadDir . $newFileName;

        // ファイルを移動
        if (move_uploaded_file($fileTmpPath, $destPath)) {
            echo json_encode(['success' => 'アップロード成功', 'filename' => $newFileName]);
        } else {
            http_response_code(500);
            echo json_encode(['error' => 'ファイルの保存に失敗しました。']);
        }

    } else {
        http_response_code(400);
        echo json_encode(['error' => 'ファイルのアップロード中にエラーが発生しました。']);
    }
} else {
    http_response_code(405); // Method Not Allowed
    echo json_encode(['error' => 'POSTリクエストを使用してください。']);
}

---

解説ポイント

項目	内容
$_FILES['myFile']	HTML側でname="myFile"とした<input type="file">に対応
UPLOAD_ERR_OK	アップロードが成功したかどうかの定数
move_uploaded_file	一時ファイルを指定ディレクトリへ移動
uniqid()	重複を避けるためのユニークなファイル名生成
json_encode	フロントエンドへのレスポンスとしてJSON形式で返す

---

注意点

• **uploads/フォルダには書き込み権限（chmod 755など）**を与えてください。
• 実運用ではMIMEタイプの確認やウイルススキャンも検討しましょう。
• クロスサイトスクリプティング（XSS）や不正ファイルの実行を防ぐために、アップロード後の表示処理にも注意が必要です。

まとめ

HTML・CSS・JavaScriptを使えば、サーバーサイドの知識がなくても、ある程度のファイルアップロードのフロントエンド処理を実装できます。デザインやUXを整えることで、より実用的な機能に仕上げることが可能です。実際のプロジェクトでは、アップロード先のバックエンドも考慮して、セキュリティやファイル制限も含めた設計が必要になります。

次のステップとしては、Node.jsやPHPなどを使ったサーバー側のファイル処理に挑戦してみるのもおすすめです。