MENU
  1. ホーム
  2. PHP
  3. PHPで複数ファイルアップロードフォームを実装する方法

PHPで複数ファイルアップロードフォームを実装する方法

PHP

PHPで複数ファイルをアップロードする機能は、Web開発においてよく必要とされるスキルの一つです。たとえば、ユーザーが一度に複数の画像をアップロードしたり、複数の書類を提出するシナリオにおいて役立ちます。単一ファイルのアップロードに比べて少し複雑な処理が必要ですが、適切な方法を理解すれば簡単に実装できます。本記事では、PHPを使用して複数ファイルアップロードを処理するフォームを構築し、サーバー側でのアップロード処理やエラーチェック、セキュリティ対策まで、ステップバイステップで解説します。

目次

PHPでのファイルアップロードの基礎知識

ファイルアップロードは、ユーザーがローカルデバイスからファイルを選択し、サーバーに送信するプロセスです。PHPでは、アップロードされたファイルが$_FILESスーパーグローバル配列を通じてアクセス可能になります。この配列には、ファイルの名前、種類、サイズ、一時ファイルの保存先、エラーステータスなどの情報が含まれています。

ファイルアップロードの仕組み

ファイルアップロードは以下の手順で行われます：

  1. HTMLフォームでenctype="multipart/form-data"属性を指定し、ファイルを選択します。
  2. PHPの$_FILESを使用してサーバーに送信されたファイルを取得します。
  3. ファイルをサーバーの指定されたディレクトリに保存します。

$_FILES配列の構造

$_FILES配列は次の情報を含んでいます：

  • name: アップロードされたファイルの名前
  • type: ファイルのMIMEタイプ（例：image/jpeg）
  • size: ファイルサイズ（バイト単位）
  • tmp_name: サーバー上で一時的に保存されたファイルのパス
  • error: アップロード中に発生したエラーコード

これらの基本概念を理解することで、ファイルアップロードの処理が容易になります。

複数ファイルアップロードに必要なHTMLフォームの作成方法

複数ファイルをアップロードするためのHTMLフォームを作成するには、ファイル入力フィールドが複数のファイルを選択できるように設定する必要があります。具体的には、<input>タグのname属性に配列形式を指定し、multiple属性を追加します。

HTMLフォームの作成手順

フォームを作成する際の基本的な手順は以下の通りです：

  1. <form>タグにenctype="multipart/form-data"属性を設定します。これはファイルのデータを送信するために必要です。
  2. <input>タグにtype="file"属性を設定し、name="files[]"のように配列形式で名前を指定します。
  3. multiple属性を追加して、複数ファイルの選択を可能にします。

実際のフォーム例

以下は、複数ファイルアップロードに対応したHTMLフォームの例です：

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" multiple>
    <input type="submit" value="アップロード">
</form>

このフォームでは、ユーザーが複数のファイルを選択してアップロードできるようになっています。フォーム送信時に選択されたファイルは、$_FILES['files']としてPHPスクリプトでアクセスできます。

フォームの検証とユーザーフィードバック

HTMLレベルでファイルの種類やサイズを制限するために、accept属性（例：accept="image/*"）を使用して特定のファイルタイプを指定することもできます。また、JavaScriptを使用して、ファイルが選択されているかどうかを事前にチェックすることも推奨されます。

ファイルアップロード処理のためのPHPスクリプトの実装

HTMLフォームでアップロードされたファイルをサーバーに保存するには、PHPスクリプトを用意してアップロード処理を実装する必要があります。以下では、複数ファイルのアップロード処理を行う具体的なPHPコードを紹介します。

ファイルアップロードスクリプトの基本構造

PHPでファイルを受け取って処理するには、$_FILES配列からファイル情報を取得し、move_uploaded_file()関数を使ってファイルをサーバーに保存します。

複数ファイルを処理するPHPコード例

以下のコードでは、複数ファイルを順番に処理し、それぞれを指定のディレクトリに保存します。

// 保存先ディレクトリを指定
$uploadDir = 'uploads/';

// 保存先ディレクトリが存在しない場合は作成
if (!is_dir($uploadDir)) {
    mkdir($uploadDir, 0777, true);
}

// ファイルがアップロードされているかチェック
if (!empty($_FILES['files']['name'][0])) {
    // アップロードされたファイルの数を取得
    $fileCount = count($_FILES['files']['name']);

    // 各ファイルを順番に処理
    for ($i = 0; $i < $fileCount; $i++) {
        $fileName = $_FILES['files']['name'][$i];
        $tmpName = $_FILES['files']['tmp_name'][$i];
        $filePath = $uploadDir . basename($fileName);

        // ファイルを指定ディレクトリに移動
        if (move_uploaded_file($tmpName, $filePath)) {
            echo "ファイル「{$fileName}」が正常にアップロードされました。<br>";
        } else {
            echo "ファイル「{$fileName}」のアップロードに失敗しました。<br>";
        }
    }
} else {
    echo "アップロードするファイルが選択されていません。";
}

このスクリプトでは、以下の処理を行っています：

  1. ファイルの保存先ディレクトリが存在しない場合は、新たに作成します。
  2. アップロードされたファイルが存在するかをチェックします。
  3. 各ファイルをmove_uploaded_file()関数で指定したディレクトリに移動します。
  4. 成功した場合は成功メッセージを、失敗した場合はエラーメッセージを表示します。

セキュリティ考慮

ファイルアップロード時には、保存先やファイル名の検証を行い、不正なファイルがアップロードされるリスクを減らす必要があります。

ファイルの種類やサイズのバリデーション方法

アップロードされたファイルの安全性と品質を確保するためには、ファイルの種類やサイズを検証することが重要です。PHPでバリデーションを行うことで、不適切なファイルのアップロードを防ぐことができます。

ファイルの種類（MIMEタイプ）の検証

アップロードされるファイルが許可された種類かどうかを確認するには、ファイルのMIMEタイプをチェックします。以下のコード例では、画像ファイルのみを許可するバリデーションを行っています。

// 許可されるMIMEタイプの配列
$allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];

// ファイルの種類をチェック
$fileType = $_FILES['files']['type'][$i];
if (!in_array($fileType, $allowedTypes)) {
    echo "ファイル「{$fileName}」は許可されていないファイルタイプです。<br>";
    continue; // このファイルの処理をスキップ
}

このコードでは、MIMEタイプがimage/jpeg、image/png、image/gifのいずれかに一致しない場合、エラーメッセージを表示して処理をスキップします。

ファイルサイズのバリデーション

ファイルサイズが許容範囲内かどうかをチェックすることで、サーバーのリソースを保護します。以下の例では、ファイルサイズの上限を5MBに設定しています。

// 許可されるファイルサイズの上限（5MB）
$maxFileSize = 5 * 1024 * 1024; // 5MB

// ファイルサイズをチェック
$fileSize = $_FILES['files']['size'][$i];
if ($fileSize > $maxFileSize) {
    echo "ファイル「{$fileName}」はサイズが大きすぎます。<br>";
    continue; // このファイルの処理をスキップ
}

このコードでは、ファイルサイズが5MBを超える場合、エラーメッセージを表示して処理をスキップします。

複数のバリデーションを組み合わせる方法

ファイルの種類とサイズの両方をチェックして、条件を満たさないファイルをスキップする処理を組み合わせることができます。

// ファイルの種類とサイズの両方を検証
if (!in_array($fileType, $allowedTypes) || $fileSize > $maxFileSize) {
    echo "ファイル「{$fileName}」は許可されていないか、サイズが大きすぎます。<br>";
    continue;
}

このように、複数の条件を組み合わせることで、より安全なファイルアップロードを実現できます。

アップロードエラーの処理とユーザーフィードバック

ファイルアップロード時には様々なエラーが発生する可能性があります。これらのエラーを適切に処理し、ユーザーにわかりやすいフィードバックを提供することが重要です。PHPでは、$_FILES配列のerrorプロパティを使用して、各ファイルに対するエラーステータスを確認できます。

ファイルアップロードエラーコードの説明

PHPでは、以下のようなファイルアップロードエラーコードが用意されています：

  • UPLOAD_ERR_OK（値：0）：エラーなし。正常にアップロードされました。
  • UPLOAD_ERR_INI_SIZE（値：1）：ファイルがphp.iniで設定されたupload_max_filesizeディレクティブの値を超えています。
  • UPLOAD_ERR_FORM_SIZE（値：2）：ファイルがHTMLフォームで指定されたMAX_FILE_SIZE制限を超えています。
  • UPLOAD_ERR_PARTIAL（値：3）：ファイルの一部のみがアップロードされました。
  • UPLOAD_ERR_NO_FILE（値：4）：ファイルがアップロードされませんでした。
  • UPLOAD_ERR_NO_TMP_DIR（値：6）：一時フォルダがありません。
  • UPLOAD_ERR_CANT_WRITE（値：7）：ディスクへの書き込みに失敗しました。
  • UPLOAD_ERR_EXTENSION（値：8）：PHP拡張によってファイルのアップロードが停止されました。

エラーの処理方法

各エラーコードに応じて、適切なメッセージをユーザーに表示する例を示します。

// ファイルアップロードエラーを処理
$error = $_FILES['files']['error'][$i];
switch ($error) {
    case UPLOAD_ERR_OK:
        // エラーなし
        break;
    case UPLOAD_ERR_INI_SIZE:
    case UPLOAD_ERR_FORM_SIZE:
        echo "ファイル「{$fileName}」はサイズが大きすぎます。<br>";
        continue;
    case UPLOAD_ERR_PARTIAL:
        echo "ファイル「{$fileName}」は一部のみアップロードされました。<br>";
        continue;
    case UPLOAD_ERR_NO_FILE:
        echo "ファイルが選択されていません。<br>";
        continue;
    case UPLOAD_ERR_NO_TMP_DIR:
        echo "一時フォルダが見つかりません。<br>";
        continue;
    case UPLOAD_ERR_CANT_WRITE:
        echo "ディスクへの書き込みに失敗しました。<br>";
        continue;
    case UPLOAD_ERR_EXTENSION:
        echo "ファイルアップロードが拡張によって停止されました。<br>";
        continue;
    default:
        echo "不明なエラーが発生しました。<br>";
        continue;
}

このコードでは、各エラーコードに対応するエラーメッセージを表示し、処理をスキップするか継続するかを判断しています。

ユーザーフィードバックの改善

ユーザーがアップロード結果を理解しやすいように、以下の工夫を行うと良いでしょう：

  • エラーメッセージをわかりやすく記述する。
  • 成功したファイルと失敗したファイルを一覧表示する。
  • ファイルサイズや種類の制限を事前に表示しておく。

これにより、ユーザーがエラーの原因を認識し、再度正しくアップロードできるようになります。

保存先ディレクトリのセキュリティ対策

ファイルのアップロードは便利ですが、セキュリティリスクも伴います。悪意のあるファイルがアップロードされることを防ぎ、システム全体の安全性を保つためには、ファイルの保存先ディレクトリに対するセキュリティ対策が不可欠です。

ディレクトリのアクセス制限

アップロードされたファイルを保存するディレクトリには、Webから直接アクセスできないように適切なアクセス制限を設定します。ディレクトリに.htaccessファイルを配置し、直接のアクセスを拒否する設定を行うことが効果的です。

# .htaccess ファイルの例
<Files "*">
    Deny from all
</Files>

この設定により、アップロードされたファイルにWeb経由でアクセスできなくなります。

保存先ディレクトリのパーミッション設定

サーバー上の保存先ディレクトリのパーミッションを適切に設定することで、セキュリティリスクを軽減できます。一般的には、ディレクトリのパーミッションを0755または0700に設定し、書き込み権限を必要最小限に抑えます。

// ディレクトリのパーミッションを設定
chmod($uploadDir, 0755);

これにより、ディレクトリへのアクセスが制限され、不正なファイル操作が防止されます。

ファイル名のサニタイズとランダム化

ユーザーがアップロードしたファイル名をそのまま使用するのは危険です。ファイル名に悪意のあるスクリプトが含まれる可能性があるため、アップロード時にファイル名をサニタイズし、ランダムな文字列に置き換えることが推奨されます。

// ファイル名をランダムな文字列に変更
$newFileName = uniqid() . '_' . basename($fileName);
$filePath = $uploadDir . $newFileName;

このコードでは、uniqid()関数を使って一意のファイル名を生成し、元のファイル名が意図せず実行されるリスクを減らします。

アップロード可能なファイルの種類を制限

ファイルの種類を厳密に制限することで、不正なファイル（スクリプトファイルなど）がアップロードされるリスクを低減できます。MIMEタイプの検証に加えて、ファイルの拡張子もチェックすることで、より安全なファイル管理が可能です。

// 許可される拡張子のリスト
$allowedExtensions = ['jpg', 'jpeg', 'png', 'gif'];
$fileExtension = pathinfo($fileName, PATHINFO_EXTENSION);

if (!in_array(strtolower($fileExtension), $allowedExtensions)) {
    echo "ファイル「{$fileName}」は許可されていない拡張子です。<br>";
    continue;
}

アップロードディレクトリの隔離

保存先ディレクトリをWebルート（公開ディレクトリ）から分離することで、直接アクセスを防ぎます。例えば、Webサーバーの公開ディレクトリ外にアップロードファイルを保存し、PHPスクリプトでファイルにアクセスする方法が有効です。

これらの対策を講じることで、アップロードされたファイルのセキュリティを高め、サーバーの安全性を維持できます。

サムネイルの生成と画像プレビュー機能の実装


アップロードされた画像ファイルを扱う際、サムネイルを生成してプレビュー機能を提供することで、ユーザーエクスペリエンスを向上させることができます。PHPでは、GDライブラリやImageMagickを使用してサムネイルを作成できますが、ここではGDライブラリを使用する方法を紹介します。

GDライブラリを使ったサムネイル生成


GDライブラリは、画像の加工や生成を行うためのPHP組み込みライブラリです。サムネイルを生成するためには、元画像を読み込み、指定したサイズにリサイズして保存します。以下のコード例では、JPEG画像のサムネイルを作成します。

// サムネイルを生成する関数
function createThumbnail($sourcePath, $thumbPath, $thumbWidth) {
    // 元画像を読み込む
    $sourceImage = imagecreatefromjpeg($sourcePath);
    if (!$sourceImage) {
        echo "画像の読み込みに失敗しました。<br>";
        return false;
    }

    // 元画像の幅と高さを取得
    $width = imagesx($sourceImage);
    $height = imagesy($sourceImage);

    // サムネイルの高さを計算
    $thumbHeight = floor($height * ($thumbWidth / $width));

    // サムネイル用の新しい画像リソースを作成
    $thumbnail = imagecreatetruecolor($thumbWidth, $thumbHeight);

    // 元画像をサムネイルにリサイズしてコピー
    imagecopyresampled($thumbnail, $sourceImage, 0, 0, 0, 0, $thumbWidth, $thumbHeight, $width, $height);

    // サムネイル画像を保存
    imagejpeg($thumbnail, $thumbPath);

    // メモリを解放
    imagedestroy($sourceImage);
    imagedestroy($thumbnail);

    return true;
}

// 使用例：サムネイルを作成
$originalImagePath = 'uploads/example.jpg';
$thumbnailPath = 'uploads/thumb_example.jpg';
$thumbnailWidth = 150; // サムネイルの幅を150ピクセルに設定

if (createThumbnail($originalImagePath, $thumbnailPath, $thumbnailWidth)) {
    echo "サムネイルが正常に作成されました。<br>";
} else {
    echo "サムネイルの作成に失敗しました。<br>";
}

このコードでは、元画像を指定した幅に基づいて縮小し、縦横比を維持してサムネイルを生成しています。

画像プレビュー機能の実装


画像のプレビュー機能を提供することで、ユーザーがアップロードしたファイルをすぐに確認できるようになります。以下は、JavaScriptを使用して画像をアップロード前にプレビュー表示する例です。

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" id="fileInput" multiple accept="image/*">
    <div id="preview"></div>
    <input type="submit" value="アップロード">
</form>

<script>
// ファイル選択時にプレビューを表示
document.getElementById('fileInput').addEventListener('change', function(event) {
    const preview = document.getElementById('preview');
    preview.innerHTML = ''; // プレビューエリアをクリア

    const files = event.target.files;
    for (const file of files) {
        if (!file.type.startsWith('image/')) continue; // 画像ファイルのみを処理

        const reader = new FileReader();
        reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.style.width = '150px'; // プレビュー画像の幅を指定
            img.style.margin = '5px';
            preview.appendChild(img);
        };
        reader.readAsDataURL(file);
    }
});
</script>

この例では、FileReaderオブジェクトを使って選択された画像ファイルを読み込み、プレビューエリアに表示しています。

サムネイル生成の注意点

  • 画像の種類（JPEG、PNG、GIFなど）によって読み込み関数を変更する必要があります（例：imagecreatefrompng()）。
  • アップロードされた画像のサイズに応じてメモリ消費が増加するため、メモリ使用量に注意しましょう。
  • アップロードされたファイルのバリデーションを必ず行い、適切なファイルのみ処理するようにします。

サムネイルの生成と画像プレビュー機能を実装することで、ユーザーに対してより快適な操作性を提供できます。

ファイルアップロード後のデータベースへの保存方法


アップロードされたファイルの情報をデータベースに保存することで、ファイル管理を効率的に行うことができます。ファイル名、ファイルの保存パス、アップロード日時などのメタデータをデータベースに記録することで、後から簡単にファイルを検索、表示、削除することが可能になります。

データベーステーブルの設計


まず、ファイル情報を保存するためのテーブルを設計します。以下は、ファイルのメタデータを保存するためのテーブル構造の例です。

CREATE TABLE uploaded_files (
    id INT AUTO_INCREMENT PRIMARY KEY,
    file_name VARCHAR(255) NOT NULL,
    file_path VARCHAR(255) NOT NULL,
    file_type VARCHAR(50) NOT NULL,
    file_size INT NOT NULL,
    upload_date DATETIME DEFAULT CURRENT_TIMESTAMP
);

このテーブルには、ファイル名、ファイルパス、ファイルタイプ、ファイルサイズ、アップロード日時などの情報を保存します。

ファイル情報をデータベースに保存するPHPコード


ファイルがアップロードされた後、その情報をデータベースに保存するPHPコードの例を以下に示します。ここでは、PDOを使用してデータベース操作を行います。

// データベース接続設定
$dsn = 'mysql:host=localhost;dbname=your_database_name;charset=utf8';
$username = 'your_username';
$password = 'your_password';

try {
    $pdo = new PDO($dsn, $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("データベース接続に失敗しました: " . $e->getMessage());
}

// ファイル情報をデータベースに保存する関数
function saveFileInfoToDatabase($pdo, $fileName, $filePath, $fileType, $fileSize) {
    $sql = "INSERT INTO uploaded_files (file_name, file_path, file_type, file_size) VALUES (:file_name, :file_path, :file_type, :file_size)";
    $stmt = $pdo->prepare($sql);
    $stmt->bindParam(':file_name', $fileName);
    $stmt->bindParam(':file_path', $filePath);
    $stmt->bindParam(':file_type', $fileType);
    $stmt->bindParam(':file_size', $fileSize);

    if ($stmt->execute()) {
        echo "ファイル情報が正常にデータベースに保存されました。<br>";
    } else {
        echo "ファイル情報の保存に失敗しました。<br>";
    }
}

// 使用例: ファイルアップロード時にデータベースに情報を保存
$originalFileName = $_FILES['files']['name'][$i];
$filePath = $uploadDir . $newFileName;
$fileType = $_FILES['files']['type'][$i];
$fileSize = $_FILES['files']['size'][$i];

saveFileInfoToDatabase($pdo, $originalFileName, $filePath, $fileType, $fileSize);

このコードでは、ファイルの名前、保存先パス、ファイルタイプ、ファイルサイズを取得し、それらをデータベースに挿入しています。

データベースへの保存のメリット

  • ファイルのメタデータを効率的に管理できる。
  • データベースを使うことで、ファイルの検索やフィルタリングが簡単に行える。
  • ファイル情報と他の関連データ（ユーザー情報など）をリンクさせることができる。

データベース保存時の注意点

  • データベース接続の際には、適切なエラーハンドリングを行い、データベース情報が漏洩しないようにする。
  • SQLインジェクションの対策として、プリペアドステートメントやパラメータバインディングを必ず使用する。
  • アップロードされたファイルの実際の保存パスとデータベースのレコードが一致しているかを確認する。

これらの手順を踏むことで、ファイル管理が容易になり、システムの運用がスムーズになります。

Ajaxを用いた非同期ファイルアップロードの実装


Ajaxを使用すると、ページをリロードせずにファイルをアップロードでき、ユーザーにとってより快適な体験を提供できます。以下では、JavaScriptのXMLHttpRequestオブジェクトやfetchAPIを使って非同期でファイルをアップロードする方法を紹介します。

HTMLフォームの作成


まず、ファイルアップロードのためのフォームを作成します。通常のHTMLフォームと似ていますが、フォームの送信はJavaScriptで制御します。

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="files[]" id="fileInput" multiple>
    <input type="button" value="アップロード" onclick="uploadFiles()">
    <div id="uploadStatus"></div>
</form>

このフォームでは、ファイル選択ボタンとアップロードボタンがあり、ボタンをクリックするとJavaScript関数uploadFiles()が呼び出されます。

JavaScriptで非同期ファイルアップロードを実装する


次に、uploadFiles()関数を実装し、選択されたファイルを非同期でサーバーにアップロードします。以下のコード例では、fetchAPIを使用しています。

function uploadFiles() {
    const fileInput = document.getElementById('fileInput');
    const files = fileInput.files;
    const formData = new FormData();

    // ファイルをFormDataオブジェクトに追加
    for (let i = 0; i < files.length; i++) {
        formData.append('files[]', files[i]);
    }

    // アップロードステータス表示エリア
    const uploadStatus = document.getElementById('uploadStatus');
    uploadStatus.innerHTML = "アップロード中...";

    // fetch APIで非同期アップロード
    fetch('upload.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        uploadStatus.innerHTML = "アップロード完了:<br>" + data;
    })
    .catch(error => {
        console.error('エラー:', error);
        uploadStatus.innerHTML = "アップロード中にエラーが発生しました。";
    });
}

このコードでは、FormDataオブジェクトを使用して選択されたファイルを送信します。fetchAPIを使ってPOSTリクエストを非同期に送信し、アップロードの結果を表示します。

サーバーサイドでのファイル処理（PHP）


サーバーサイドのupload.phpでは、従来のファイルアップロード処理と同様に、$_FILES配列を使ってファイルを処理します。

$uploadDir = 'uploads/';

if (!is_dir($uploadDir)) {
    mkdir($uploadDir, 0777, true);
}

if (!empty($_FILES['files']['name'][0])) {
    $fileCount = count($_FILES['files']['name']);
    $uploadedFiles = [];

    for ($i = 0; $i < $fileCount; $i++) {
        $fileName = $_FILES['files']['name'][$i];
        $tmpName = $_FILES['files']['tmp_name'][$i];
        $filePath = $uploadDir . basename($fileName);

        if (move_uploaded_file($tmpName, $filePath)) {
            $uploadedFiles[] = $fileName;
        }
    }

    if (!empty($uploadedFiles)) {
        echo "以下のファイルがアップロードされました:<br>" . implode('<br>', $uploadedFiles);
    } else {
        echo "ファイルのアップロードに失敗しました。";
    }
} else {
    echo "アップロードするファイルが選択されていません。";
}

このスクリプトは、アップロードされたファイルをサーバーに保存し、結果をクライアントに返します。

Ajaxを使ったアップロードのメリット

  • ページリロードなしでファイルをアップロードできるため、よりスムーズなユーザー体験を提供できる。
  • 進捗状況の表示や複数のリクエスト処理が容易。
  • ユーザーインターフェースの向上: アップロード結果やエラーメッセージを即時に表示できる。

Ajaxアップロードの注意点

  • ファイルのバリデーションはクライアントサイドとサーバーサイドの両方で行う必要があります。
  • 大容量ファイルのアップロードにはタイムアウトやメモリ制限に注意が必要です。
  • セキュリティ対策として、ファイルの種類やサイズの制限、保存先の適切な設定を行うことが重要です。

Ajaxを使用することで、非同期のファイルアップロードが可能になり、よりインタラクティブなWebアプリケーションを構築できます。

実践的な応用例：画像ギャラリーの作成


複数ファイルアップロード機能を活用して、ユーザーが画像をアップロードし、アップロードされた画像をギャラリー形式で表示するWebアプリケーションを構築します。このセクションでは、アップロードからギャラリー表示までの実装手順を紹介します。

1. アップロードされた画像をデータベースに保存する


まず、画像のメタデータを保存するためのデータベーステーブルを設計します。このテーブルには、画像のファイル名、ファイルパス、アップロード日時などを記録します。

CREATE TABLE image_gallery (
    id INT AUTO_INCREMENT PRIMARY KEY,
    file_name VARCHAR(255) NOT NULL,
    file_path VARCHAR(255) NOT NULL,
    upload_date DATETIME DEFAULT CURRENT_TIMESTAMP
);

PHPのファイルアップロード処理で、アップロードされた画像情報をこのテーブルに保存するコードを追加します。

// ファイルアップロード処理後にデータベースに保存
function saveImageToDatabase($pdo, $fileName, $filePath) {
    $sql = "INSERT INTO image_gallery (file_name, file_path) VALUES (:file_name, :file_path)";
    $stmt = $pdo->prepare($sql);
    $stmt->bindParam(':file_name', $fileName);
    $stmt->bindParam(':file_path', $filePath);
    $stmt->execute();
}

// アップロードされた画像を保存する処理
$uploadedFileName = $_FILES['files']['name'][$i];
$uploadedFilePath = $uploadDir . basename($uploadedFileName);

// ファイル移動に成功した場合、データベースに保存
if (move_uploaded_file($tmpName, $uploadedFilePath)) {
    saveImageToDatabase($pdo, $uploadedFileName, $uploadedFilePath);
    echo "画像「{$uploadedFileName}」がアップロードされました。<br>";
}

2. 画像ギャラリーの表示


アップロードされた画像をギャラリー形式で表示するには、データベースから画像情報を取得し、HTMLに動的にレンダリングします。

// データベースから画像情報を取得
$sql = "SELECT file_name, file_path FROM image_gallery ORDER BY upload_date DESC";
$stmt = $pdo->query($sql);
$images = $stmt->fetchAll(PDO::FETCH_ASSOC);

取得した画像情報を使ってギャラリーを生成します。

<div class="gallery">
    <?php foreach ($images as $image): ?>
        <div class="gallery-item">
            <img src="<?= htmlspecialchars($image['file_path']) ?>" alt="<?= htmlspecialchars($image['file_name']) ?>" width="200">
            <p><?= htmlspecialchars($image['file_name']) ?></p>
        </div>
    <?php endforeach; ?>
</div>

3. ギャラリーのスタイリング


CSSを使ってギャラリーを美しくレイアウトします。

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.gallery-item {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    width: 220px;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
    max-width: 100%;
    height: auto;
}

このスタイル設定により、アップロードされた画像がグリッド状に整然と表示され、各画像の下にファイル名が表示されます。

4. 画像の削除機能の追加


アップロードされた画像を削除する機能も追加すると、より柔軟なギャラリー管理が可能です。

// 画像削除処理
if (isset($_POST['delete_id'])) {
    $imageId = (int)$_POST['delete_id'];

    // データベースから画像の情報を取得
    $stmt = $pdo->prepare("SELECT file_path FROM image_gallery WHERE id = :id");
    $stmt->execute([':id' => $imageId]);
    $image = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($image) {
        // 物理ファイルを削除
        unlink($image['file_path']);

        // データベースからレコードを削除
        $stmt = $pdo->prepare("DELETE FROM image_gallery WHERE id = :id");
        $stmt->execute([':id' => $imageId]);

        echo "画像が削除されました。";
    } else {
        echo "画像が見つかりません。";
    }
}

HTMLフォームを追加して、各画像に削除ボタンを設置します。

<form method="post" style="display:inline;">
    <input type="hidden" name="delete_id" value="<?= $image['id'] ?>">
    <input type="submit" value="削除">
</form>

5. 画像ギャラリーの応用例


画像ギャラリーは、ポートフォリオサイトや商品カタログ、旅行写真の共有など、さまざまな用途で応用可能です。ユーザーが自身のギャラリーを作成できるソーシャルメディア機能の一部としても利用できます。

このように、画像ギャラリーの作成を通して、アップロード機能を実践的に活用することができます。

まとめ


本記事では、PHPを使用した複数ファイルアップロードの実装方法について、基本的なHTMLフォームの作成から、ファイルのバリデーション、アップロードエラーの処理、セキュリティ対策、Ajaxによる非同期アップロード、そして実践的な応用例として画像ギャラリーの作成までを詳しく解説しました。各ステップで適切な処理を行うことで、ユーザーにとって使いやすく、セキュアなファイルアップロードシステムを構築することが可能です。アップロード機能を理解し、応用することで、Webアプリケーションの開発におけるさまざまなシナリオに対応できるスキルを習得できます。

PHP
フォーム ファイルアップロード Web開発 PHP

コメント

コメントする

目次