在涉及到电脑目录多文件查看时，我们一般是通过改变查看方式为大图标。来方便我们预览图片等文件，以至于不需要一个个点击点开查看，避免费时费力。但是视频和录音文件呢？还是无法避免一个个打开的操作。所以。通过脚步读取，网页浏览的方式就很不错了。
单文件 show.php 源码：
<!DOCTYPE html>
<html>
<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 password
if ($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为日期参数，方便做二级目录拼接，当然，如果文件都在一个文件夹下的话，这个参数就不用管了。第二个参数是为了保证私密性做的密码验证。该代码主要功能是将文件中的图片，视频，音频进行批量可视化展示。
