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

php

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

PHPで画像アップロード機能を作る方法を紹介します。フォームから選択した画像をサーバーへアップロードし、指定したフォルダへ保存できるサンプルです。プロフィール画像や商品画像、お問い合わせフォームへの画像添付機能などを作成したい場合に利用できます。

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

デモ

画像アップロードフォーム
画像をアップロードしました。（デモ）

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

<?php

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

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

$message = '';

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

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

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

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

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

            $message = '画像をアップロードしました。';

        } else {

            $message = '画像の保存に失敗しました。';

        }

    } 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-image-upload_wrap{
    max-width:600px;
    margin:0 auto;
    padding:24px;
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:#ffffff;
}

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

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

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

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

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

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

</style>

</head>
<body>

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

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

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

        <div class="php-image-upload_field">

            <label class="php-image-upload_label">
                画像ファイル
            </label>

            <input
                class="php-image-upload_input"
                type="file"
                name="image"
                accept="image/*"
            >

        </div>

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

    </form>

    <?php if ($message !== ''): ?>

        <div class="php-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 をサーバーへアップロードし、ブラウザからアクセスしてください。画像をアップロードすると、同じ階層に uploads フォルダが自動生成され、その中へ画像ファイルが保存されます。手動でフォルダを作成する必要はありません。

コメント