PHPで複数画像アップロード機能を作る方法【サンプルコード付き】

php

PHPで複数画像アップロード機能を作る方法

PHPで複数画像アップロード機能を作る方法を紹介します。最大5枚の画像を一度に選択し、サーバーへまとめてアップロードできるサンプルです。保存先フォルダが存在しない場合は自動で作成されるため、商品画像の登録やギャラリー機能、複数画像の一括保存などを手軽に実装したい場合に利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

複数画像アップロードフォーム
最大5枚の画像をアップロードしました。（デモ）

コードをコピーして使おう！

<?php

// アップロード先フォルダ名です
$upload_dir = 'uploads';

// フォルダが存在しない場合は自動で作成します
if (!is_dir($upload_dir)) {
    mkdir($upload_dir, 0777, true);
}

$message = '';

// フォーム送信時の処理です
if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    $upload_count = 0;

    // 最大5枚の画像を順番に処理します
    for ($i = 1; $i <= 5; $i++) {

        $input_name = 'image' . $i;

        // ファイルが選択されていない場合はスキップします
        if (
            !isset($_FILES[$input_name]) ||
            $_FILES[$input_name]['error'] === UPLOAD_ERR_NO_FILE
        ) {
            continue;
        }

        // ファイルが正常にアップロードされたか確認します
        if ($_FILES[$input_name]['error'] === UPLOAD_ERR_OK) {

            // 元のファイル名を取得します
            $file_name = basename($_FILES[$input_name]['name']);

            // 保存先を作成します
            $save_path = $upload_dir . '/' . $file_name;

            // アップロードされた画像を保存します
            if (move_uploaded_file($_FILES[$input_name]['tmp_name'], $save_path)) {
                $upload_count++;
            }

        }

    }

    if ($upload_count > 0) {
        $message = $upload_count . '枚の画像をアップロードしました。';
    } else {
        $message = '画像を選択してください。';
    }

}

?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>複数画像アップロード</title>

<style>
body{
    font-family:sans-serif;
    background:#f8fafc;
    margin:40px;
}

.php-multiple-image-upload_wrap{
    max-width:600px;
    margin:0 auto;
    padding:24px;
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:#ffffff;
}

.php-multiple-image-upload_title{
    font-size:22px;
    font-weight:bold;
    margin-bottom:20px;
}

.php-multiple-image-upload_field{
    margin-bottom:14px;
}

.php-multiple-image-upload_label{
    display:block;
    font-weight:bold;
    margin-bottom:6px;
}

.php-multiple-image-upload_input{
    width:100%;
}

.php-multiple-image-upload_btn{
    width:100%;
    height:46px;
    border:none;
    border-radius:10px;
    background:#0b6bff;
    color:#ffffff;
    font-size:16px;
    cursor:pointer;
}

.php-multiple-image-upload_result{
    margin-top:16px;
    padding:12px;
    border-radius:10px;
    background:#f0fdf4;
    color:#15803d;
}
</style>

</head>
<body>

<div class="php-multiple-image-upload_wrap">

    <div class="php-multiple-image-upload_title">
        複数画像アップロードフォーム
    </div>

    <form method="post" enctype="multipart/form-data">

        <div class="php-multiple-image-upload_field">
            <label class="php-multiple-image-upload_label">画像1</label>
            <input class="php-multiple-image-upload_input" type="file" name="image1" accept="image/*">
        </div>

        <div class="php-multiple-image-upload_field">
            <label class="php-multiple-image-upload_label">画像2</label>
            <input class="php-multiple-image-upload_input" type="file" name="image2" accept="image/*">
        </div>

        <div class="php-multiple-image-upload_field">
            <label class="php-multiple-image-upload_label">画像3</label>
            <input class="php-multiple-image-upload_input" type="file" name="image3" accept="image/*">
        </div>

        <div class="php-multiple-image-upload_field">
            <label class="php-multiple-image-upload_label">画像4</label>
            <input class="php-multiple-image-upload_input" type="file" name="image4" accept="image/*">
        </div>

        <div class="php-multiple-image-upload_field">
            <label class="php-multiple-image-upload_label">画像5</label>
            <input class="php-multiple-image-upload_input" type="file" name="image5" accept="image/*">
        </div>

        <button class="php-multiple-image-upload_btn" type="submit">
            アップロードする
        </button>

    </form>

    <?php if ($message !== ''): ?>
        <div class="php-multiple-image-upload_result">
            <?= htmlspecialchars($message, ENT_QUOTES, 'UTF-8') ?>
        </div>
    <?php endif; ?>

</div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、index.php を配置するだけで利用できます。画像の保存先になる uploads フォルダは、初回実行時に存在しない場合のみ自動で作成されます。すでに uploads フォルダがある場合は、そのフォルダをそのまま使用します。 

sample/
└── index.php

（初回実行後に自動作成）

sample/
├── index.php
└── uploads/

index.php をサーバーへアップロードし、ブラウザから index.php にアクセスしてください。画像1〜画像5の中からアップロードしたい画像を選択して送信すると、同じ階層に uploads フォルダが自動生成され、その中へ選択した画像が保存されます。

コメント