自学内容网 自学内容网

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 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为日期参数,方便做二级目录拼接,当然,如果文件都在一个文件夹下的话,这个参数就不用管了。第二个参数是为了保证私密性做的密码验证。该代码主要功能是将文件中的图片,视频,音频进行批量可视化展示。

3.强强联合

既然知道代码功能是干什么的了,那么我们就可以进行下一个实操环节了。什么?你说你本地根本没有那么多图片或视频资源,食之无味?那你肯定不是我的粉丝,没有关注我之前的博客。该代码功能配合下面两个实用效果更佳。

python通过url爬取视频资源到本地-CSDN博客 python通过url爬取动漫图片_iw233.cn/api/random.php-CSDN博客

希望这个三合一,能给你带来不一样的体验。将复杂的东西简单化,简单的东西工具化。

 


原文地址:https://blog.csdn.net/qq_34761385/article/details/137788956

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!