引言

一、前端准备

1. HTML表单

<form action="upload.php" method="post" enctype="multipart/form-data">
    选择图片：
    <input type="file" name="images[]" multiple>
    <input type="submit" value="上传">
</form>

2. CSS样式

为了使上传界面更加友好，我们可以添加一些CSS样式。

input[type="file"] {
    margin-bottom: 10px;
}

二、后端处理

1. PHP文件上传

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['images'])) {
    $uploadDir = 'uploads/';
    $allowedExtensions = ['jpg', 'jpeg', 'png', 'gif'];

    foreach ($_FILES['images']['name'] as $key => $name) {
        $ext = strtolower(pathinfo($name, PATHINFO_EXTENSION));
        if (in_array($ext, $allowedExtensions)) {
            $tmpName = $_FILES['images']['tmp_name'][$key];
            $newFileName = uniqid() . '.' . $ext;
            move_uploaded_file($tmpName, $uploadDir . $newFileName);
        }
    }
    echo "图片上传成功！";
}
?>

2. 图片存储路径

3. 验证图片类型

三、图片展示

1. HTML列表

<ul>
    <?php
    $uploadDir = 'uploads/';
    $files = glob($uploadDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
    foreach ($files as $file) {
        echo '<li><img src="' . $file . '" alt="Uploaded Image"></li>';
    }
    ?>
</ul>

2. 图片路径

四、总结

五、注意事项

  1. 确保上传的图片不会超过服务器的大小。
  2. 对上传的图片进行安全检查，防止恶意文件上传。
  3. 对上传的图片进行压缩处理，提高页面加载速度。