Upload 10 files

.gitignore

@@ -0,0 +1,4 @@
+img/*
+videos/*
+!img/.gitkeep
+!videos/.gitkeep 

Dockerfile

@@ -0,0 +1,62 @@
+FROM ubuntu:22.04
+
+# 设置非交互模式和时区
+ENV DEBIAN_FRONTEND=noninteractive
+ENV TZ=Asia/Shanghai
+
+# 更新包列表并安装基础依赖
+RUN apt-get update && apt-get install -y \
+    software-properties-common \
+    curl \
+    wget \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+# 添加 PHP 仓库并安装 PHP
+RUN add-apt-repository ppa:ondrej/php && \
+    apt-get update && \
+    apt-get install -y \
+    php8.3-cli \
+    php8.3-fpm \
+    php8.3-common \
+    php8.3-xml \
+    php8.3-curl \
+    php8.3-mbstring \
+    && rm -rf /var/lib/apt/lists/*
+
+# 设置工作目录
+WORKDIR /var/www/html
+
+# 复制项目文件
+COPY . /var/www/html/
+
+# 创建必要的目录
+RUN mkdir -p /var/www/html/img \
+    /var/www/html/videos \
+    && chown -R www-data:www-data /var/www/html \
+    && find /var/www/html -type d -exec chmod 755 {} \; \
+    && find /var/www/html -type f -exec chmod 644 {} \; \
+    && chmod -R 777 /var/www/html/img \
+    && chmod -R 777 /var/www/html/videos
+
+# 配置 PHP
+RUN echo "display_errors = On" >> /etc/php/8.3/cli/conf.d/error-reporting.ini && \
+    echo "error_reporting = E_ALL" >> /etc/php/8.3/cli/conf.d/error-reporting.ini && \
+    echo "log_errors = On" >> /etc/php/8.3/cli/conf.d/error-reporting.ini && \
+    echo "error_log = /dev/stderr" >> /etc/php/8.3/cli/conf.d/error-reporting.ini && \
+    echo "upload_max_filesize = 100M" >> /etc/php/8.3/cli/conf.d/uploads.ini && \
+    echo "post_max_size = 100M" >> /etc/php/8.3/cli/conf.d/uploads.ini
+
+# 创建启动脚本
+RUN echo '#!/bin/bash\n\
+exec php -S 0.0.0.0:7860 -t /var/www/html /var/www/html/router.php 2>&1 | grep -v "Accepted\|Closing\|preconnection"' > /usr/local/bin/docker-entrypoint.sh \
+    && chmod +x /usr/local/bin/docker-entrypoint.sh
+
+# 暴露端口
+EXPOSE 7860
+
+# 切换到 www-data 用户
+USER www-data
+
+# 启动 PHP 内置服务器
+CMD ["/usr/local/bin/docker-entrypoint.sh"] 

delete.php

@@ -0,0 +1,40 @@
+<?php
+$response = ["code" => 400, "msg" => "failed"];
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $data = json_decode(file_get_contents('php://input'), true);
+    if (isset($data['filename'])) {
+        $filename = basename($data['filename']); // Ensure the filename is safe
+
+        // Define file paths
+        $imagePath = 'img/' . $filename;
+        $videoPath = 'videos/' . $filename;
+
+        // Check if the file exists in the image directory
+        if (file_exists($imagePath)) {
+            if (unlink($imagePath)) {
+                $response['code'] = 200;
+                $response['msg'] = 'Image deleted successfully';
+            } else {
+                $response['msg'] = 'Failed to delete image';
+            }
+        }
+        // Check if the file exists in the video directory
+        elseif (file_exists($videoPath)) {
+            if (unlink($videoPath)) {
+                $response['code'] = 200;
+                $response['msg'] = 'Video deleted successfully';
+            } else {
+                $response['msg'] = 'Failed to delete video';
+            }
+        }
+        else {
+            $response['msg'] = 'File not found';
+        }
+    } else {
+        $response['msg'] = 'Filename not provided';
+    }
+}
+
+echo json_encode($response);
+?>

docker-compose.yml

@@ -0,0 +1,9 @@
+version: '3'
+services:
+  web:
+    build: .
+    ports:
+      - "7860:7860"
+    volumes:
+      - ./img:/var/www/html/img
+      - ./videos:/var/www/html/videos 

images.php

@@ -0,0 +1,25 @@
+<?php
+$imageDir = 'img/';
+$videoDir = 'videos/';
+$images = [];
+$videos = [];
+
+// 获取图片文件列表
+if (is_dir($imageDir)) {
+    $imageFiles = array_diff(scandir($imageDir), ['..', '.']);
+    foreach ($imageFiles as $file) {
+        $images[] = $imageDir . $file;
+    }
+}
+
+// 获取视频文件列表
+if (is_dir($videoDir)) {
+    $videoFiles = array_diff(scandir($videoDir), ['..', '.']);
+    foreach ($videoFiles as $file) {
+        $videos[] = $videoDir . $file;
+    }
+}
+
+// 返回JSON响应
+echo json_encode(['images' => $images, 'videos' => $videos]);
+?>

img.php

@@ -0,0 +1,45 @@
+<?php
+$directory = 'img';
+$images = [];
+
+// 支持的图片扩展名
+$imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff', 'svg'];
+
+// 打开目录并读取图片文件
+if (is_dir($directory)) {
+    if ($dh = opendir($directory)) {
+        while (($file = readdir($dh)) !== false) {
+            $filePath = $directory . '/' . $file;
+            // 获取文件扩展名并检查是否为图片
+            $fileExtension = strtolower(pathinfo($filePath, PATHINFO_EXTENSION));
+            if (is_file($filePath) && in_array($fileExtension, $imageExtensions)) {
+                $images[] = $file;
+            }
+        }
+        closedir($dh);
+    }
+}
+
+// 随机选择一张图片
+if (!empty($images)) {
+    $image = $images[array_rand($images)];
+    $imagePath = $directory . '/' . $image;
+    
+    // 获取图片的MIME类型
+    $imageInfo = getimagesize($imagePath);
+    $mimeType = $imageInfo['mime'];
+    
+    // 设置HTTP头部
+    header('Content-Type: ' . $mimeType);
+    header('Content-Length: ' . filesize($imagePath));
+    
+    // 输出图片内容
+    readfile($imagePath);
+    exit;
+} else {
+    // 如果没有找到图片，则返回404错误
+    header("HTTP/1.0 404 Not Found");
+    echo 'No images found in the directory.';
+    exit;
+}
+?>

index.html

@@ -0,0 +1,336 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Responsive Waterfall Media Gallery</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            background: url('https://zhian.serv00.net/img/Image_1722541553.png') no-repeat center center fixed;
+            background-size: cover;
+            margin: 0;
+            padding: 0;
+            min-height: 100vh;
+        }
+
+        .upload-container {
+            margin-top: 20px;
+            text-align: center;
+            background-color: rgba(255, 255, 255, 0.8);
+            padding: 10px;
+            border-radius: 5px;
+        }
+
+        .gallery {
+            width: 90%;
+            background-color: rgba(255, 255, 255, 0.8);
+            border-radius: 5px;
+            padding: 20px;
+            box-sizing: border-box;
+            column-count: 4;
+            column-gap: 10px;
+        }
+
+        .gallery-item {
+            position: relative;
+            break-inside: avoid;
+            margin-bottom: 10px;
+            border-radius: 8px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+        }
+
+        .gallery-item img,
+        .gallery-item video {
+            width: 100%;
+            height: auto;
+            display: block;
+            object-fit: cover;
+            transition: opacity 0.3s ease, transform 0.3s ease;
+        }
+        
+      .gallery img:hover, .gallery video:hover {
+            transform: scale(1.05);
+        }
+        .gallery img.deleting, .gallery video.deleting {
+            transition: transform 0.5s ease-out, opacity 0.5s ease-out;
+            transform: translateX(-100%);
+            opacity: 0;
+        }
+        .gallery img.marked, .gallery video.marked {
+            border: 5px solid rgba(255, 0, 0, 0.5);
+        }
+        #uploadBtn {
+            margin-bottom: 20px;
+        }
+      
+        .actions {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            width: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            color: white;
+            text-align: center;
+            padding: 10px 0;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .actions button {
+            flex: 1;
+            background: none;
+            border: none;
+            color: white;
+            cursor: pointer;
+            padding: 5px 10px;
+        }
+
+        .gallery-item:hover .actions {
+            opacity: 1;
+        }
+
+        .gallery-item.clicked img {
+            opacity: 0;
+            transform: scale(0.8);
+            transition: opacity 0.3s ease, transform 0.3s ease;
+        }
+
+        #progressBarContainer {
+            width: 80%;
+            margin: 20px auto;
+            background-color: #f3f3f3;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            display: none;
+        }
+
+        #progressBar {
+            width: 0;
+            height: 20px;
+            background-color: #4caf50;
+            border-radius: 5px;
+        }
+
+        .popup {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background-color: #4caf50;
+            color: white;
+            padding: 10px;
+            border-radius: 5px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            z-index: 1000;
+            display: none;
+        }
+
+        @media (max-width: 1024px) {
+            .gallery {
+                column-count: 3;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .gallery {
+                column-count: 2;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .gallery {
+                column-count: 1;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="upload-container">
+        <input type="file" id="uploadBtn" accept="image/*,video/*" multiple>
+    </div>
+    <div id="progressBarContainer">
+        <div id="progressBar"></div>
+    </div>
+    <div class="gallery" id="gallery"></div>
+    <div class="popup" id="popup">Upload Successful!</div>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            const gallery = document.getElementById("gallery");
+            const uploadBtn = document.getElementById("uploadBtn");
+            const progressBarContainer = document.getElementById("progressBarContainer");
+            const progressBar = document.getElementById("progressBar");
+            const popup = document.getElementById("popup");
+            const longPressDuration = 500;
+            let touchTimer = null;
+
+            // Function to determine if the device is mobile
+            function isMobileDevice() {
+                return /Mobi|Android/i.test(navigator.userAgent);
+            }
+
+            uploadBtn.addEventListener("change", function(event) {
+                Array.from(event.target.files).forEach(file => {
+                    const formData = new FormData();
+                    formData.append("file", file);
+
+                    const xhr = new XMLHttpRequest();
+                    xhr.open('POST', 'upload.php', true);
+
+                    xhr.upload.onprogress = function(event) {
+                        if (event.lengthComputable) {
+                            const percentComplete = (event.loaded / event.total) * 100;
+                            progressBar.style.width = percentComplete + '%';
+                        }
+                    };
+
+                    xhr.onloadstart = function() {
+                        progressBarContainer.style.display = 'block';
+                    };
+
+                    xhr.onloadend = function() {
+                        progressBarContainer.style.display = 'none';
+                        progressBar.style.width = '0%';
+                    };
+
+                    xhr.onload = function() {
+                        if (xhr.status === 200) {
+                            const response = JSON.parse(xhr.responseText);
+                            if (response.code === 200) {
+                                let mediaElement;
+                                if (response.img) {
+                                    mediaElement = createMediaElement(response.img, 'img');
+                                } else if (response.video) {
+                                    mediaElement = createMediaElement(response.video, 'video');
+                                }
+                                gallery.appendChild(mediaElement);
+                                showPopup("上传成功!");
+                            } else {
+                                console.error('上传失败:', response.msg);
+                            }
+                        } else {
+                            console.error('上传失败, 服务器返回状态码:', xhr.status);
+                        }
+                    };
+
+                    xhr.send(formData);
+                });
+            });
+
+            fetch('images.php')
+                .then(response => response.json())
+                .then(data => {
+                    if (data.images && data.images.length > 0) {
+                        data.images.forEach(src => {
+                            const mediaElement = createMediaElement(src, 'img');
+                            gallery.appendChild(mediaElement);
+                        });
+                    }
+                    if (data.videos && data.videos.length > 0) {
+                        data.videos.forEach(src => {
+                            const mediaElement = createMediaElement(src, 'video');
+                            gallery.appendChild(mediaElement);
+                        });
+                    }
+                })
+                .catch(error => console.error('获取图像和视频时出错:', error));
+
+            function createMediaElement(src, type) {
+                const mediaElement = document.createElement('div');
+                mediaElement.className = 'gallery-item';
+                let element;
+                if (type === 'img') {
+                    element = document.createElement('img');
+                    element.src = src;
+                    element.alt = 'Image';
+                } else {
+                    element = document.createElement('video');
+                    element.src = src;
+                    element.controls = true;
+                    element.alt = 'Video';
+                }
+
+                element.oncontextmenu = function(event) {
+                    event.preventDefault();
+                    copyToClipboard(src);
+                };
+
+                element.addEventListener('touchstart', function(event) {
+                    touchTimer = setTimeout(() => copyToClipboard(src), longPressDuration);
+                }, false);
+
+                element.addEventListener('touchend', function() {
+                    if (touchTimer) clearTimeout(touchTimer);
+                }, false);
+
+                const actions = document.createElement('div');
+                actions.className = 'actions';
+                const copyButton = document.createElement('button');
+                copyButton.textContent = '复制链接';
+                copyButton.onclick = function() { copyToClipboard(src); };
+                const deleteButton = document.createElement('button');
+                deleteButton.className = 'delete-button';
+                deleteButton.textContent = '删除';
+                deleteButton.onclick = function() { deleteMedia(mediaElement, src); };
+                actions.appendChild(copyButton);
+                actions.appendChild(deleteButton);
+                mediaElement.appendChild(element);
+                mediaElement.appendChild(actions);
+                return mediaElement;
+            }
+
+            function copyToClipboard(src) {
+                const url = new URL(src, window.location.origin).href;
+                navigator.clipboard.writeText(url)
+                    .then(() => {
+                        if (!isMobileDevice()) {
+                            alert('链接已复制到剪贴板');
+                        }
+                    })
+                    .catch(err => console.error('复制失败:', err));
+            }
+
+            function deleteMedia(mediaElement, src) {
+                mediaElement.classList.add('clicked');
+
+                setTimeout(() => {
+                    fetch('delete.php', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({ filename: src.split('/').pop() })
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.code === 200) {
+                            gallery.removeChild(mediaElement);
+                            showPopup('删除成功');
+                        } else {
+                            console.error('删除失败:', data.msg);
+                        }
+                    })
+                    .catch(error => console.error('删除媒体时出错:', error));
+                }, 300);
+            }
+
+            function showPopup(message) {
+                popup.textContent = message;
+                popup.style.display = 'block';
+                setTimeout(() => {
+                    popup.style.display = 'none';
+                }, 2000);
+            }
+        });
+    </script>
+</body>
+</html>

router.php

@@ -0,0 +1,59 @@
+<?php
+// 设置时区
+date_default_timezone_set('Asia/Shanghai');
+
+// 处理错误输出
+ini_set('display_errors', 'Off');
+error_reporting(E_ALL);
+ini_set('log_errors', 'On');
+ini_set('error_log', '/dev/stderr');
+
+// 设置 Content-Type 为 JSON（针对 API 请求）
+if (in_array(basename($_SERVER['REQUEST_URI']), [
+    'delete.php',
+    'images.php',
+    'videos.php',
+    'upload.php'
+])) {
+    header('Content-Type: application/json');
+}
+
+// 处理静态文件
+if (preg_match('/\.(css|js|png|jpg|jpeg|gif|ico|webp|mp4)$/', $_SERVER['REQUEST_URI'])) {
+    return false; // 让 PHP 内置服务器处理静态文件
+}
+
+// 根据请求路径加载对应的 PHP 文件
+$path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
+$file = ltrim($path, '/');
+
+// API 路由映射
+$apiRoutes = [
+    'delete.php' => 'delete.php',
+    'images.php' => 'images.php',
+    'img.php' => 'img.php',
+    'upload.php' => 'upload.php',
+    'videos.php' => 'videos.php'
+];
+
+// 处理 API 请求
+if (isset($apiRoutes[$file])) {
+    require __DIR__ . '/' . $apiRoutes[$file];
+    return true;
+}
+
+// 如果是空路径或根路径，返回 index.html
+if ($file === '' || $file === 'index.html') {
+    require __DIR__ . '/index.html';
+    return true;
+}
+
+// 如果文件存在且是 PHP 文件，则执行它
+if (file_exists(__DIR__ . '/' . $file) && preg_match('/\.php$/', $file)) {
+    require __DIR__ . '/' . $file;
+    return true;
+}
+
+// 默认返回 index.html
+require __DIR__ . '/index.html';
+return true; 

upload.php

@@ -0,0 +1,70 @@
+<?php
+// 设置上传目录
+$imageDir = 'img/';
+$videoDir = 'videos/';
+
+// 检查并创建目录
+if (!is_dir($imageDir)) {
+    mkdir($imageDir, 0777, true);
+}
+if (!is_dir($videoDir)) {
+    mkdir($videoDir, 0777, true);
+}
+
+// 获取协议
+$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? 'https://' : 'http://';
+// 获取客户端IP和端口
+$host = $_SERVER['HTTP_HOST'];
+$baseUrl = $protocol . $host . dirname($_SERVER['SCRIPT_NAME']) . '/';
+
+// 准备响应数组
+$response = ["code" => 400, "msg" => "failed"];
+
+// 检查是否有文件上传
+if ($_FILES) {
+    // 获取文件信息
+    $file = $_FILES['file'];
+    $filename = basename($file['name']);
+    $fileTmpPath = $file['tmp_name'];
+    $fileSize = $file['size'];
+    $fileType = $file['type'];
+
+    // 设置文件名及上传路径
+    if (strpos($fileType, 'image') !== false) {
+        // 处理图片上传
+        $ext = pathinfo($filename, PATHINFO_EXTENSION);
+        $newFilename = 'Image_' . time() . '.' . $ext;
+        $uploadFilePath = $imageDir . $newFilename;
+        $urlPath = $baseUrl . $imageDir . $newFilename;
+    } elseif (strpos($fileType, 'video') !== false) {
+        // 处理视频上传
+        $ext = pathinfo($filename, PATHINFO_EXTENSION);
+        $newFilename = 'Video_' . time() . '.' . $ext;
+        $uploadFilePath = $videoDir . $newFilename;
+        $urlPath = $baseUrl . $videoDir . $newFilename;
+    } else {
+        // 无效的文件类型
+        $response['msg'] = 'Invalid file type';
+        echo json_encode($response);
+        exit;
+    }
+
+    // 移动文件到指定目录
+    if (move_uploaded_file($fileTmpPath, $uploadFilePath)) {
+        $response['code'] = 200;
+        $response['msg'] = 'success';
+        if (strpos($fileType, 'image') !== false) {
+            $response['img'] = $urlPath;
+        } elseif (strpos($fileType, 'video') !== false) {
+            $response['videos'] = $urlPath;
+        }
+    } else {
+        $response['msg'] = 'File upload failed';
+    }
+} else {
+    $response['msg'] = 'No file uploaded';
+}
+
+// 返回JSON响应并替换\/为/
+echo str_replace('\/', '/', json_encode($response));
+?>

videos.php

@@ -0,0 +1,44 @@
+<?php
+// 设置Content-Type为application/json
+header('Content-Type: application/json');
+
+// 禁止缓存的HTTP头
+header('Cache-Control: no-cache, no-store, must-revalidate'); // HTTP 1.1
+header('Pragma: no-cache'); // HTTP 1.0
+header('Expires: 0'); // Proxies
+
+// 定义视频文件夹的路径
+$videoDir = 'videos';
+
+// 获取视频文件列表
+$videos = glob($videoDir . '/*.mp4');
+
+// 检查是否有视频文件
+if ($videos === false || count($videos) === 0) {
+    $response = [
+        "code" => 500,
+        "msg" => "No videos found",
+        "videos" => null
+    ];
+} else {
+    // 随机选择一个视频文件
+    $randomVideo = $videos[array_rand($videos)];
+    $videoUrl = 'http://' . $_SERVER['HTTP_HOST'] . '/' . $randomVideo;
+
+    // 构建响应数组
+    $response = [
+        "code" => 200,
+        "msg" => "success",
+        "videos" => $videoUrl
+    ];
+}
+
+// 将响应数组编码为JSON
+$jsonResponse = json_encode($response);
+
+// 替换JSON字符串中的反斜杠
+$jsonResponse = str_replace('\/', '/', $jsonResponse);
+
+// 输出JSON响应
+echo $jsonResponse;
+?>