php单文件实现文件批量预览——图片，音频，视频

有一天，无意中发现了一个在线文件预览地址。即那种暴露目录的地址。该目录下清一色的图片。觉得一个个点击进去查看太麻烦了，因此特意写了这个文件预览代码。单php文件，放到站点下运行即可。

1.实用场景

比如一个在线站点文件目录如下：一个个点击查看太慢了。所以就想一次性展示出来。

代码运行实际效果：

tips：咳咳...这里的图片来源于我之前python爬取的图片，仅学习交流。

2.源码解析

废话不多说，先上代码：show.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>记录查询</title>
</head>
<body><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f9f9f9;}form {margin: 20px;padding: 10px;background-color: #fff;border-radius: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}label {display: block;margin-bottom: 5px;}input[type="text"],input[type="password"],input[type="submit"] {width: 98%;padding: 8px;margin-bottom: 10px;border: 1px solid #ccc;border-radius: 3px;}input[type="submit"] {background-color: #007bff;color: #fff;cursor: pointer;}#imageContainer,#audioContainer {margin: 20px;display: flex;flex-wrap: wrap;justify-content: center;}img {margin: 5px;}audio {margin: 5px;}</style>
<form method="post"><label for="date">选择查看的日期 (年-月-日):</label><input type="text" id="date" name="date" required value="<?php echo htmlspecialchars(empty($_POST['date']) ? '' : $_POST['date']); ?>"><br><label for="password">访问密码:</label><input type="password" id="password" name="password" required  value="<?php echo htmlspecialchars(empty($_POST['password']) ? '' : $_POST['password']); ?>" ><br><input type="submit" value="查阅">
</form><div id="imageContainer"></div>
<div id="audioContainer"></div>
<div id="videoContainer"></div><?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {$date = $_POST["date"];$password = $_POST["password"];// Check if password is correct$correctPassword = "admin"; // Change this to your actual passwordif ($password === $correctPassword) {$url = "http://localhost/img/";$ch = curl_init();curl_setopt($ch, CURLOPT_URL, $url);curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);$output = curl_exec($ch);curl_close($ch);$doc = new DOMDocument();@$doc->loadHTML($output);$links = $doc->getElementsByTagName('a');$imageLinks = [];$audioLinks = [];$videoLinks = [];foreach ($links as $link) {$href = $link->getAttribute('href');if (substr($href, -4) === '.jpg') {$imageLinks[] = $url . '/' . $href;} elseif (substr($href, -4) === '.mp3') {$audioLinks[] = $url . '/' . $href;}elseif (substr($href, -4) === '.mp4') {$videoLinks[] = $url . '/' . $href;}}echo '<script>';echo 'const imageLinks = ' . json_encode($imageLinks) . ';';echo 'const audioLinks = ' . json_encode($audioLinks) . ';';echo 'const videoLinks = ' . json_encode($videoLinks) . ';';echo 'const videoContainer = document.getElementById("videoContainer");';echo 'videoLinks.forEach(video => {';echo '    const videoElement = document.createElement("video");';echo '    videoElement.controls = true;';echo '    const source = document.createElement("source");';echo '    source.src = video;';echo '    source.type = "video/mp4";';echo '    videoElement.appendChild(source);';echo '    videoContainer.appendChild(videoElement);';echo '});';echo 'const imageContainer = document.getElementById("imageContainer");';echo 'imageLinks.forEach(image => {';echo '    const img = document.createElement("img");';echo '    img.src = image;';echo '    img.style.width = "200px";';echo '    imageContainer.appendChild(img);';echo '});';echo 'const audioContainer = document.getElementById("audioContainer");';echo 'audioLinks.forEach(audio => {';echo '    const audioElement = document.createElement("audio");';echo '    audioElement.controls = true;';echo '    const source = document.createElement("source");';echo '    source.src = audio;';echo '    source.type = "audio/mp3";';echo '    audioElement.appendChild(source);';echo '    audioContainer.appendChild(audioElement);';echo '});';echo '</script>';} else {echo "<p>密码错误，无权访问</p>";}
}
?>
</body>
</html>

从效果图能看到这里特意传递了两个参数，一个参数是date为日期参数，方便做二级目录拼接，当然，如果文件都在一个文件夹下的话，这个参数就不用管了。第二个参数是为了保证私密性做的密码验证。该代码主要功能是将文件中的图片，视频，音频进行批量可视化展示。