本文介绍如何在 PHP 文件列表中自动判断媒体类型，对图片使用 标签、对视频使用 标签进行响应式渲染，并兼容分页逻辑与常见格式（如 JPG、PNG、MP4）。
本文介绍如何在 php 文件列表中自动判断媒体类型，对图片使用 `` 标签、对视频使用 `
在构建媒体展示页面（如用户上传画廊或资源库）时，仅支持图片渲染的代码无法适配视频文件——直接用 加载 MP4 会显示为破损图标。解决的关键在于：基于文件扩展名动态选择 HTML 媒体标签，同时保持原有按修改时间排序与分页功能不变。
以下是优化后的完整实现方案，已整合排序、分页与智能渲染逻辑：
✅ 步骤一：安全获取并排序文件列表
<?php
$dirname = __DIR__; // 确保 $dirname 已正确定义，例如 '/var/www/html/'
$limit = 10;
$targetpage = 'index.php';
// 安全获取 uploads 目录下所有文件（排除目录）
$images = glob($dirname . '/uploads/*.{jpg,jpeg,png,gif,mp4,webm,avi}', GLOB_BRACE);
if ($images === false) $images = [];
// 按最后修改时间降序排序（最新在前）
usort($images, function($a, $b) {
return filemtime($b) - filemtime($a); // 简化比较函数，避免负数逻辑错误
});
$total_pages = count($images);
$page = max(1, intval($_GET['page'] ?? 1));
$start = ($page - 1) * $limit;
$paginated_images = array_slice($images, $start, $limit);
?>⚠️ 注意事项：
- 使用 GLOB_BRACE 显式限定支持的扩展名，提升安全性与性能；
- filemtime() 可能因权限失败，建议增加 is_file() 和 is_readable() 校验（生产环境推荐）；
- 避免直接拼接 $dirname，应使用 realpath() 或配置常量防止路径遍历。
✅ 步骤二：智能渲染图片与视频
<?php if (!empty($paginated_images)): ?>
<?php foreach ($paginated_images as $image): ?>
<?php
$ext = strtolower(pathinfo($image, PATHINFO_EXTENSION));
$rel_path = str_replace($dirname, '', $image); // 转为 Web 可访问路径（如 /uploads/xxx.jpg）
?>
<?php if (in_array($ext, ['jpg', 'jpeg', 'png', 'gif'])): ?>
<figure class="media-item">
<img src="<?= htmlspecialchars($rel_path) ? alt="PHP 中动态识别并正确渲染图片与视频文件的完整实现" >"
alt="Media image"
loading="lazy"
width="320" height="240">
</figure>
<?php elseif (in_array($ext, ['mp4', 'webm', 'ogg'])): ?>
<figure class="media-item">
<video controls preload="metadata" width="320" height="240">
<source src="<?= htmlspecialchars($rel_path) ?>" type="video/<?= $ext ?>">
Your browser does not support the video tag.
</video>
</figure>
<?php else: ?>
<!-- 可选：跳过不支持类型或显示占位提示 -->
<div class="media-item unsupported">Unsupported format: <?= $ext ?></div>
<?php endif; ?>
<?php endforeach; ?>
<?php else: ?>
<p>No media files found.</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill5233" title="btpanel phpsite 宝塔面板PHP网站"><img
src="https://img.php.cn/upload/skill/000/000/081/179040786932301.jpg" alt="btpanel phpsite 宝塔面板PHP网站" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill5233" title="btpanel phpsite 宝塔面板PHP网站">btpanel phpsite 宝塔面板PHP网站</a>
<p>宝塔面板 PHP 网站管理：站点创建、删除、启停、PHP 版本切换、域名管理、SSL证书管理、伪静态管理、数据库管理</p>
</div>
<a href="/xiazai/skill5233" title="btpanel phpsite 宝塔面板PHP网站" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/7fc7563c4182" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">PHP免费学习笔记（深入）</a>”；</p>
<?php endif; ?>? 增强建议：
- 使用
语义化包裹媒体元素，提升可访问性（a11y）； - htmlspecialchars() 防止 XSS；
- loading="lazy" 延迟加载提升首屏性能；
- 视频添加 preload="metadata" 减少初始带宽消耗；
- 提供 fallback 文本增强兼容性。
✅ 步骤三：基础分页输出（精简版）
<?php
if ($total_pages > $limit):
$adjacents = 2;
$lastpage = ceil($total_pages / $limit);
$lpm1 = $lastpage - 1;
echo '<div class="pagination">';
if ($page > 1) echo "<a href='{$targetpage}?page=1'>« First</a>";
for ($counter = max(1, $page - $adjacents); $counter <= min($lastpage, $page + $adjacents); $counter++) {
if ($counter == $page)
echo "<span class='current'>{$counter}</span>";
else
echo "<a href='{$targetpage}?page={$counter}'>{$counter}</a>";
}
if ($page < $lastpage) echo "<a href='{$targetpage}?page={$lastpage}'>Last »</a>";
echo '</div>';
endif;
?>✅ 总结
该方案无需额外依赖，纯原生 PHP 即可实现：
? 自动识别 .jpg/.png/.mp4 等主流格式；
? 复用原有时间排序与分页结构；
? 输出符合现代 Web 标准的语义化、安全、高性能 HTML；
? 易于扩展（如添加音频支持只需追加 ['mp3','wav'] 到判断数组）。
将以上三段代码按顺序嵌入你的 index.php，即可让媒体画廊真正“一码多能”。
