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

php

PHPで画像削除機能を作る方法

PHPで画像削除機能を作る方法を紹介します。画像をアップロードして一覧表示し、不要になった画像を削除ボタンで削除できるサンプルです。保存先フォルダは自動生成されるため、画像管理システムや商品画像管理、プロフィール画像の管理画面などを作成したい場合に利用できます。

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

デモ

画像管理

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

<?php

// 画像を保存するフォルダ名です
$upload_dir = 'uploads';

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

$message = '';

// 対応する画像拡張子です
$allowed_extensions = ['jpg', 'jpeg', 'png', 'gif'];

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

    // 画像アップロード処理です
    if (isset($_POST['action']) && $_POST['action'] === 'upload') {

        if (
            isset($_FILES['image']) &&
            $_FILES['image']['error'] === UPLOAD_ERR_OK
        ) {

            // ファイル名と拡張子を取得します
            $file_name = basename($_FILES['image']['name']);
            $extension = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));

            // 画像ファイルかどうかを確認します
            if (in_array($extension, $allowed_extensions, true)) {

                $save_path = $upload_dir . '/' . $file_name;

                // アップロードされた画像を保存します
                if (move_uploaded_file($_FILES['image']['tmp_name'], $save_path)) {
                    $message = '画像をアップロードしました。';
                } else {
                    $message = '画像のアップロードに失敗しました。';
                }

            } else {
                $message = 'JPEG・PNG・GIF画像を選択してください。';
            }

        } else {
            $message = '画像ファイルを選択してください。';
        }

    }

    // 画像削除処理です
    if (isset($_POST['action']) && $_POST['action'] === 'delete') {

        // 削除対象のファイル名を取得します
        $delete_file = basename($_POST['delete_file'] ?? '');
        $delete_path = $upload_dir . '/' . $delete_file;
        $extension = strtolower(pathinfo($delete_file, PATHINFO_EXTENSION));

        // 対応画像のみ削除します
        if (
            $delete_file !== '' &&
            in_array($extension, $allowed_extensions, true) &&
            file_exists($delete_path)
        ) {

            if (unlink($delete_path)) {
                $message = '画像を削除しました。';
            } else {
                $message = '画像の削除に失敗しました。';
            }

        } else {
            $message = '削除対象の画像が見つかりません。';
        }

    }

}

// uploadsフォルダ内の画像一覧を取得します
$image_files = [];

foreach ($allowed_extensions as $extension) {
    $image_files = array_merge(
        $image_files,
        glob($upload_dir . '/*.' . $extension)
    );
}

?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像削除機能</title>

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

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

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

.php-image-delete_field{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:14px;
}

.php-image-delete_label{
    font-weight:bold;
}

.php-image-delete_input{
    width:100%;
    padding:12px;
    box-sizing:border-box;
    border:1px solid #d1d5db;
    border-radius:10px;
    background:#ffffff;
}

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

.php-image-delete_result{
    margin-top:16px;
    padding:14px;
    border:1px solid #bbf7d0;
    border-radius:12px;
    background:#f0fdf4;
    color:#15803d;
}

.php-image-delete_list{
    margin-top:24px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.php-image-delete_item{
    padding:14px;
    border:1px solid #d1d5db;
    border-radius:12px;
    background:#ffffff;
}

.php-image-delete_name{
    margin-bottom:10px;
    font-size:14px;
    word-break:break-all;
}

.php-image-delete_remove{
    width:100%;
    height:40px;
    border:none;
    border-radius:8px;
    background:#dc2626;
    color:#ffffff;
    cursor:pointer;
}

.php-image-delete_empty{
    margin-top:24px;
    padding:14px;
    border:1px solid #d1d5db;
    border-radius:12px;
    background:#ffffff;
}
</style>

</head>
<body>

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

    <div class="php-image-delete_title">
        画像管理
    </div>

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

        <input type="hidden" name="action" value="upload">

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

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

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

    </form>

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

    <?php if (!empty($image_files)): ?>

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

            <?php foreach ($image_files as $image_path): ?>

                <?php $image_name = basename($image_path); ?>

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

                    <div class="php-image-delete_name">
                        <?= htmlspecialchars($image_name, ENT_QUOTES, 'UTF-8') ?>
                    </div>

                    <form method="post" onsubmit="return confirm('この画像を削除しますか?');">

                        <input type="hidden" name="action" value="delete">
                        <input type="hidden" name="delete_file" value="<?= htmlspecialchars($image_name, ENT_QUOTES, 'UTF-8') ?>">

                        <button class="php-image-delete_remove" type="submit">
                            削除
                        </button>

                    </form>

                </div>

            <?php endforeach; ?>

        </div>

    <?php else: ?>

        <div class="php-image-delete_empty">
            画像はまだアップロードされていません。
        </div>

    <?php endif; ?>

</div>

</body>
</html>

ファイル構成と設置方法

このサンプルは index.php だけで利用できます。画像を保存する uploads フォルダは、存在しない場合に自動で作成されます。

sample/
└── index.php

(初回実行後に自動生成)

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

index.php をサーバーへアップロードしてブラウザからアクセスしてください。画像をアップロードすると、同じ階層に uploads フォルダが自動生成され、画像が保存されます。アップロード済みの画像はファイル名で一覧表示され、削除ボタンを押すと確認ダイアログが表示され、OKを選択した場合のみ削除されます。


コメント