一、基础环境搭建

在开始编写代码之前，请确保你的计算机上已安装以下软件：

  • PHP：可以从官方网站（）下载并安装。
  • MySQL：作为PHP的数据库支持，可以从下载。
  • Apache或Nginx：作为服务器软件，可以从各自的官方网站下载。

安装完成后，请确保你的Web服务器已正常运行。

二、图片上传与存储

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $target_dir = "uploads/";
    $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
    $uploadOk = 1;
    $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

    // 检查文件是否是真实的图片
    if(isset($_POST["submit"])) {
        $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
        if($check !== false) {
            echo "File is an image - " . $check["mime"] . ".";
            $uploadOk = 1;
        } else {
            echo "File is not an image.";
            $uploadOk = 0;
        }
    }

    // 检查文件是否已存在
    if (file_exists($target_file)) {
        echo "Sorry, file already exists.";
        $uploadOk = 0;
    }

    // 检查文件大小
    if ($_FILES["fileToUpload"]["size"] > 500000) {
        echo "Sorry, your file is too large.";
        $uploadOk = 0;
    }

    // 检查文件类型
    if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
    && $imageFileType != "gif" ) {
        echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
        $uploadOk = 0;
    }

    // 检查是否上传成功
    if ($uploadOk == 1) {
        if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
            echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
        } else {
            echo "Sorry, there was an error uploading your file.";
        }
    }
}
?>

三、图片展示

<!DOCTYPE html>
<html>
<head>
    <title>图片展示</title>
</head>
<body>
    <h1>图片展示</h1>
    <?php
    $target_dir = "uploads/";
    $files = glob($target_dir."*.{jpg,jpeg,png,gif}", GLOB_BRACE);
    foreach ($files as $file) {
        echo "<img src='".$file."' alt='图片展示'/>";
    }
    ?>
</body>
</html>

四、图片动态效果

<!DOCTYPE html>
<html>
<head>
    <title>图片动态效果</title>
    <style>
        .rotating-image {
            width: 200px;
            height: 200px;
            background-image: url('uploads/your-image.jpg');
            background-size: cover;
            animation: spin 5s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="rotating-image"></div>
</body>
</html>