PHP自动图片文件类型分类器项目求技术反馈与指导

我正在开发一个个人项目，目标是把它做成一个成熟的图片分类图库，目前还在早期开发阶段。因为经验有限，我知道当前版本有不少不完善的地方，希望能得到关于最佳实践的诚恳反馈、建议，或者是在UI设计、后端逻辑这类特定领域的技术指导。我很想学习改进，任何帮助都感激不尽！

HTML/PHP代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Gallery image sorter</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <ul class="headerMENU">

    <?php 
    //make sure to insert your folder name and or specific directory here
    $Galery_NAME = 'INSERRT_YOUR_FOLDER_NAME_HERE';
    $dir = "./".$Galery_NAME."";
    $files = scandir($dir);


    // sorry i couldnt think of a better solution
    array_shift($files);
    array_shift($files);


    $URL = isset($_GET['folder']) ? $_GET['folder'] : '';

    foreach ($files as $FILE) {
        $filter = ["_","-","~"];
        $cleaner_FILE = str_replace($filter, " ", $FILE);
        $UTCFIRST_FILE = ucfirst(strtolower($cleaner_FILE));

        //selector function
        $css_class = "";
        if ($FILE == $URL) {
            $css_class = 'class="selected"';
        }

        echo '<li><a href="index.php?folder='.$FILE.'" '.$css_class.'>'.$UTCFIRST_FILE.'</a></li>';
    }
    ?>
    </ul>


    <?php 

        $ROUTE = "./".$Galery_NAME."/" . $URL;

        $DIR_ROUTE = scandir($ROUTE);

        $Types = ["jpg", "png", "gif"];

        foreach ($Types as $TYPES) {
            echo "<h2>Obrázky " . strtoupper($TYPES) . "</h2>";
            echo "<ul>";

            foreach ($DIR_ROUTE as $FOTO) {

                $Extention = strtolower(pathinfo($FOTO, PATHINFO_EXTENSION));

                if ($Extention == $TYPES) {

                    $CLEAN_NAME_foto = str_replace(["_","-","~"], " ", pathinfo($FOTO, PATHINFO_FILENAME));

                    echo "<li>"."<a href='$ROUTE/$FOTO' target='_blank'>" . $CLEAN_NAME_foto . "<br>";
                    echo "<img src='$ROUTE/$FOTO' class='thumpnail_img''>";
                    echo "</a>". "</li>";
                }
            }
            echo "</ul>";
        }
    
    ?>


</body>
</html>

CSS代码 #

* {
    background-color: #000;
    color: white;
}

.headerMENU {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.headerMENU a {
    text-decoration: none;
    color: white;
}

.selected {
    background-color: darkred;
    color: white !important;
}

ul {
    list-style: none;
}

li {
    display: inline-block;
    margin: 10px;
    vertical-align: top;
    text-align: center;
}
ul li a{
    text-decoration: none;
}
.thumpnail_img{
    width: 100px;
}

优化建议 #

后端逻辑部分 #

• 输入安全加固：直接用$_GET['folder']拼接路径存在路径遍历风险，必须添加验证逻辑：先用filter_input(INPUT_GET, 'folder', FILTER_SANITIZE_STRING)过滤输入，再用realpath()验证路径是否在指定图库目录范围内
• 目录处理优化：替换两次array_shift($files)的写法，改用array_diff(scandir($dir), ['.', '..'])排除当前/上级目录，代码更清晰规范
• 文件类型校验：不要仅靠扩展名判断文件类型，可使用finfo_file()检测真实MIME类型；把允许的扩展名定义为常量，方便后续维护
• 错误处理补充：当传入的文件夹不存在时，scandir($ROUTE)会报错，需先判断is_dir($ROUTE)，不存在则显示友好提示（如“该分类不存在”）
• 代码结构拆分：把文件名格式化、目录遍历这类重复逻辑抽成独立函数（比如formatFileName($name)、getGalleryFolders($dir)），提升代码可读性和复用性
• 命名规范统一：变量名改用小驼峰风格（如$Galery_NAME改为$galleryName，$TYPES改为$type），避免大小写混乱

UI设计部分 #

• 响应式布局改造：图片列表当前用inline-block在小屏幕会拥挤，建议改用CSS Grid实现自适应：display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px;
• 选中状态优化：给.selected的a标签添加内边距（padding: 5px 10px; border-radius: 4px;），让点击区域更合理，视觉上更突出
• 图片加载优化：生成专门的缩略图代替直接缩放原图，减少加载耗时；给img标签添加loading="lazy"实现懒加载
• 空状态提示：当某个分类下没有对应类型的图片时，当前会显示空列表，建议添加“暂无该类型图片”的提示文本
• 视觉层次提升：给body添加padding: 20px;避免内容贴边；给导航栏加底部边框，区分导航区和内容区
• 交互反馈增强：给图片链接添加hover效果（transform: scale(1.05); transition: all 0.3s;），提升用户交互体验

内容的提问来源于stack exchange，提问作者67Mango st