设为首页收藏本站我的广告
切换到窄版
  • 首页Portal
  • 论坛BBS
  • 资讯
  • 附近圈Group
  • 动态Space
  • 图文
  • 搜剧
  • 游戏
    • 立即注册
    MVP星源–发现最有趣的！»论坛 › 分类信息 › 源码模板 › 最新图片阅后自焚源码下载
    返回列表 发布新帖
    查看: 8|回复: 0

    最新图片阅后自焚源码下载

    星源
    <
    灌水成绩
    1998
    30
    30
    主题
    帖子
    回贴

    等级头衔
    UID : 1
    组图 :
    用户组 :
    星级 :

    积分成就 威望 : 3 个
    贡献 : 57 点
    星源币 : 12260916 元
    违规 : 0 次
    在线时间 : 310 小时
    注册时间 : 2025-2-17
    最后登录 : 2025-6-11

    荣誉勋章

    最佳新人活跃会员热心会员推广达人宣传达人灌水之王优秀版主荣誉管理精华达人金牌管理创始人男员勋章歌唱达人音乐达人交友达人

    联系方式

    QQ

    发表于 前天 19:06 | 查看全部 |阅读模式 来自 中国–广东–湛江–遂溪县 电信
    最新图片阅后自焚源码

    使用教程：直接上传php给写入权限即可，无需数据库！
    7.png
    1. <?PHP
    2. // 配置区域
    3. define('STORAGE_DIR', __DIR__ . '/storage/');
    4. define('DB_FILE', __DIR__ . '/database.json');
    5. define('MAX_VIEWS_MIN', 1);
    6. define('MAX_VIEWS_MAX', 999);

    8. // 创建必要目录
    9. if (!file_exists(STORAGE_DIR)) {
    10.     mkdir(STORAGE_DIR, 0700, true);
    11. }

    13. // 处理文件查看
    14. if (isset($_GET['token'])) {
    15.     $token = $_GET['token'];
    16.     $db = loadDatabase();
    17.    
    18.     if (isset($db[$token])) {
    19.         $entry = &$db[$token];
    20.         $filePath = STORAGE_DIR . $entry['filename'];
    21.         
    22.         // 检查访问次数
    23.         if ($entry['views'] >= $entry['max_views']) {
    24.             // 删除文件并移除记录
    25.             @unlink($filePath);
    26.             unset($db[$token]);
    27.             saveDatabase($db);
    28.             renderExpiredPage();
    29.             exit;
    30.         }
    31.         
    32.         // 增加访问计数
    33.         $entry['views']++;
    34.         saveDatabase($db);
    35.         
    36.         // 输出文件
    37.         header('Content-Type: ' . mime_content_type($filePath));
    38.         readfile($filePath);
    39.         
    40.         // 检查是否需要销毁
    41.         if ($entry['views'] >= $entry['max_views']) {
    42.             @unlink($filePath);
    43.             unset($db[$token]);
    44.             saveDatabase($db);
    45.         }
    46.         exit;
    47.     } else {
    48.         renderInvalidLinkPage();
    49.         exit;
    50.     }
    51. }

    53. // 处理文件上传
    54. $error = '';
    55. $link = '';
    56. if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
    57.     $file = $_FILES['file'];
    58.     $maxViews = isset($_POST['views']) ? max(MAX_VIEWS_MIN, min(MAX_VIEWS_MAX, (int)$_POST['views'])) : MAX_VIEWS_MIN;
    59.    
    60.     // 验证文件类型
    61.     $allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
    62.     if (!in_array($file['type'], $allowedTypes)) {
    63.         $error = '只允许上传JPG、PNG、GIF或WEBP图片';
    64.     } else if ($file['error'] !== UPLOAD_ERR_OK) {
    65.         $error = '文件上传错误: ' . $file['error'];
    66.     } else {
    67.         // 生成唯一标识
    68.         $token = bin2hex(random_bytes(16));
    69.         $filename = $token . '_' . basename($file['name']);
    70.         $filePath = STORAGE_DIR . $filename;
    71.         
    72.         // 保存文件
    73.         if (move_uploaded_file($file['tmp_name'], $filePath)) {
    74.             // 保存到数据库
    75.             $db = loadDatabase();
    76.             $db[$token] = [
    77.                 'filename' => $filename,
    78.                 'max_views' => $maxViews,
    79.                 'views' => 0,
    80.                 'created' => time()
    81.             ];
    82.             saveDatabase($db);
    83.             
    84.             // 生成访问链接
    85.             $protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http";
    86.             $host = $_SERVER['HTTP_HOST'];
    87.             $script = $_SERVER['SCRIPT_NAME'];
    88.             $link = "$protocol://$host$script?token=$token";
    89.         } else {
    90.             $error = '文件保存失败，请检查目录权限';
    91.         }
    92.     }
    93. }

    95. // 辅助函数：加载数据库
    96. function loadDatabase() {
    97.     if (file_exists(DB_FILE)) {
    98.         return json_decode(file_get_contents(DB_FILE), true) ?: [];
    99.     }
    100.     return [];
    101. }

    103. // 辅助函数：保存数据库
    104. function saveDatabase($data) {
    105.     file_put_contents(DB_FILE, json_encode($data, JSON_PRETTY_PRINT));
    106. }

    108. // 渲染过期页面
    109. function renderExpiredPage() {
    110.     header("Content-Type: text/HTML");
    111.     echo <<<HTML
    112.     <!DOCTYPE html>
    113.     <html lang="zh-CN">
    114.     <head>
    115.         <meta charset="UTF-8">
    116.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    117.         <title>文件已销毁</title>
    118.         <style>
    119.             * {
    120.                 margin: 0;
    121.                 padding: 0;
    122.                 box-sizing: border-box;
    123.                 -webkit-tap-highlight-color: transparent;
    124.             }
    125.             body {
    126.                 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    127.                 background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    128.                 min-height: 100vh;
    129.                 display: flex;
    130.                 justify-content: center;
    131.                 align-items: center;
    132.                 color: #fff;
    133.                 padding: 20px;
    134.                 line-height: 1.5;
    135.             }
    136.             .container {
    137.                 background: rgba(255, 255, 255, 0.1);
    138.                 backdrop-filter: blur(10px);
    139.                 -webkit-backdrop-filter: blur(10px);
    140.                 border-radius: 16px;
    141.                 padding: 30px 25px;
    142.                 width: 100%;
    143.                 max-width: 400px;
    144.                 text-align: center;
    145.                 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    146.                 border: 1px solid rgba(255, 255, 255, 0.2);
    147.                 margin: 20px;
    148.             }
    149.             h1 {
    150.                 font-size: 1.8rem;
    151.                 margin-bottom: 15px;
    152.                 font-weight: 600;
    153.                 text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    154.             }
    155.             p {
    156.                 font-size: 1rem;
    157.                 margin-bottom: 25px;
    158.                 opacity: 0.9;
    159.             }
    160.             .icon {
    161.                 font-size: 3.5rem;
    162.                 margin-bottom: 20px;
    163.                 color: #ff6b6b;
    164.                 text-shadow: 0 0 15px rgba(255, 107, 107, 0.7);
    165.             }
    166.             .btn {
    167.                 display: inline-block;
    168.                 background: #fff;
    169.                 color: #2575fc;
    170.                 padding: 12px 28px;
    171.                 border-radius: 50px;
    172.                 text-decoration: none;
    173.                 font-weight: 600;
    174.                 font-size: 1rem;
    175.                 transition: all 0.2s ease;
    176.                 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    177.                 border: none;
    178.                 cursor: pointer;
    179.                 width: 100%;
    180.                 max-width: 200px;
    181.             }
    182.             .btn:active {
    183.                 transform: scale(0.98);
    184.             }
    185.             @media (max-width: 480px) {
    186.                 .container {
    187.                     padding: 25px 20px;
    188.                     border-radius: 14px;
    189.                 }
    190.                 h1 {
    191.                     font-size: 1.6rem;
    192.                 }
    193.             }
    194.         </style>
    195.     </head>
    196.     <body>
    197.         <div class="container">
    198.             <div class="icon">🔥</div>
    199.             <h1>文件已自毁</h1>
    200.             <p>此文件已达到最大访问次数限制，系统已自动销毁。</p>
    201.             <a href="./" class="btn">返回首页</a>
    202.         </div>
    203.     </body>
    204.     </html>
    205. HTML;
    206. }

    208. // 渲染无效链接页面
    209. function renderInvalidLinkPage() {
    210.     header("Content-Type: text/html");
    211.     echo <<<HTML
    212.     <!DOCTYPE html>
    213.     <html lang="zh-CN">
    214.     <head>
    215.         <meta charset="UTF-8">
    216.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    217.         <title>链接无效</title>
    218.         <style>
    219.             * {
    220.                 margin: 0;
    221.                 padding: 0;
    222.                 box-sizing: border-box;
    223.                 -webkit-tap-highlight-color: transparent;
    224.             }
    225.             body {
    226.                 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    227.                 background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    228.                 min-height: 100vh;
    229.                 display: flex;
    230.                 justify-content: center;
    231.                 align-items: center;
    232.                 color: #333;
    233.                 padding: 20px;
    234.                 line-height: 1.5;
    235.             }
    236.             .container {
    237.                 background: rgba(255, 255, 255, 0.2);
    238.                 backdrop-filter: blur(10px);
    239.                 -webkit-backdrop-filter: blur(10px);
    240.                 border-radius: 16px;
    241.                 padding: 30px 25px;
    242.                 width: 100%;
    243.                 max-width: 400px;
    244.                 text-align: center;
    245.                 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    246.                 border: 1px solid rgba(255, 255, 255, 0.3);
    247.                 margin: 20px;
    248.             }
    249.             h1 {
    250.                 font-size: 1.8rem;
    251.                 margin-bottom: 15px;
    252.                 color: #d63031;
    253.                 font-weight: 600;
    254.             }
    255.             p {
    256.                 font-size: 1rem;
    257.                 margin-bottom: 25px;
    258.                 opacity: 0.9;
    259.             }
    260.             .icon {
    261.                 font-size: 3.5rem;
    262.                 margin-bottom: 20px;
    263.                 color: #d63031;
    264.             }
    265.             .btn {
    266.                 display: inline-block;
    267.                 background: #d63031;
    268.                 color: white;
    269.                 padding: 12px 28px;
    270.                 border-radius: 50px;
    271.                 text-decoration: none;
    272.                 font-weight: 600;
    273.                 font-size: 1rem;
    274.                 transition: all 0.2s ease;
    275.                 box-shadow: 0 4px 12px rgba(214, 48, 49, 0.3);
    276.                 border: none;
    277.                 cursor: pointer;
    278.                 width: 100%;
    279.                 max-width: 200px;
    280.             }
    281.             .btn:active {
    282.                 transform: scale(0.98);
    283.             }
    284.             @media (max-width: 480px) {
    285.                 .container {
    286.                     padding: 25px 20px;
    287.                     border-radius: 14px;
    288.                 }
    289.                 h1 {
    290.                     font-size: 1.6rem;
    291.                 }
    292.             }
    293.         </style>
    294.     </head>
    295.     <body>
    296.         <div class="container">
    297.             <div class="icon">⚠️</div>
    298.             <h1>链接无效或已过期</h1>
    299.             <p>您访问的链接可能已失效、过期或被销毁。</p>
    300.             <a href="./" class="btn">返回首页</a>
    301.         </div>
    302.     </body>
    303.     </html>
    304. HTML;
    305. }
    306. ?>

    308. <!DOCTYPE html>
    309. <html lang="zh-CN">
    310. <head>
    311.     <meta charset="UTF-8">
    312.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    313.     <title>阅后自焚图片分享 - 刀客源码网</title>
    314.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    315.     <style>
    316.         :root {
    317.             --primary-color: #1a2a6c;
    318.             --secondary-color: #b21f1f;
    319.             --text-color: #333;
    320.             --light-text: #666;
    321.             --bg-color: #f8f9fa;
    322.             --card-bg: #fff;
    323.             --border-color: #e0e0e0;
    324.             --error-color: #e53e3e;
    325.             --success-color: #48bb78;
    326.         }
    327.         
    328.         * {
    329.             margin: 0;
    330.             padding: 0;
    331.             box-sizing: border-box;
    332.             -webkit-tap-highlight-color: transparent;
    333.         }
    334.         
    335.         body {
    336.             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    337.             background: var(--bg-color);
    338.             color: var(--text-color);
    339.             line-height: 1.5;
    340.             min-height: 100vh;
    341.             padding: 0;
    342.             margin: 0;
    343.         }
    344.         
    345.         .app-container {
    346.             max-width: 100%;
    347.             width: 100%;
    348.             margin: 0 auto;
    349.             background: white;
    350.             min-height: 100vh;
    351.             position: relative;
    352.             overflow-x: hidden;
    353.         }
    354.         
    355.         /* 头部样式 */
    356.         .app-header {
    357.             background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    358.             color: white;
    359.             padding: 18px 20px;
    360.             text-align: center;
    361.             position: relative;
    362.         }
    363.         
    364.         .app-header h1 {
    365.             font-size: 1.5rem;
    366.             font-weight: 600;
    367.             margin-bottom: 5px;
    368.         }
    369.         
    370.         .app-header p {
    371.             font-size: 0.9rem;
    372.             opacity: 0.9;
    373.             max-width: 400px;
    374.             margin: 0 auto;
    375.         }
    376.         
    377.         .header-icon {
    378.             position: absolute;
    379.             top: 15px;
    380.             right: 15px;
    381.             font-size: 2rem;
    382.             opacity: 0.2;
    383.         }
    384.         
    385.         /* 主要内容区 */
    386.         .main-content {
    387.             padding: 20px;
    388.             max-width: 500px;
    389.             margin: 0 auto;
    390.         }
    391.         
    392.         /* 上传区域 */
    393.         .upload-section {
    394.             background: var(--card-bg);
    395.             border-radius: 14px;
    396.             padding: 20px;
    397.             margin-bottom: 20px;
    398.             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    399.             border: 1px solid var(--border-color);
    400.         }
    401.         
    402.         .section-title {
    403.             display: flex;
    404.             align-items: center;
    405.             gap: 10px;
    406.             font-size: 1.2rem;
    407.             margin-bottom: 20px;
    408.             color: var(--primary-color);
    409.             font-weight: 600;
    410.         }
    411.         
    412.         .section-title i {
    413.             background: var(--primary-color);
    414.             color: white;
    415.             width: 36px;
    416.             height: 36px;
    417.             border-radius: 50%;
    418.             display: flex;
    419.             align-items: center;
    420.             justify-content: center;
    421.             font-size: 1rem;
    422.         }
    423.         
    424.         .form-group {
    425.             margin-bottom: 20px;
    426.         }
    427.         
    428.         label {
    429.             display: block;
    430.             margin-bottom: 8px;
    431.             font-weight: 500;
    432.             color: var(--text-color);
    433.             font-size: 0.95rem;
    434.         }
    435.         
    436.         /* 文件上传区域 */
    437.         .file-input {
    438.             position: relative;
    439.             border: 2px dashed var(--border-color);
    440.             border-radius: 12px;
    441.             padding: 30px 15px;
    442.             text-align: center;
    443.             transition: all 0.2s;
    444.             background: #f8fafc;
    445.             cursor: pointer;
    446.             overflow: hidden;
    447.         }
    448.         
    449.         .file-input:hover {
    450.             border-color: var(--primary-color);
    451.         }
    452.         
    453.         .file-input i {
    454.             font-size: 2.2rem;
    455.             color: var(--primary-color);
    456.             margin-bottom: 10px;
    457.         }
    458.         
    459.         .file-input p {
    460.             margin-bottom: 10px;
    461.             color: var(--light-text);
    462.             font-size: 0.9rem;
    463.         }
    464.         
    465.         .file-input .btn {
    466.             display: inline-block;
    467.             background: var(--primary-color);
    468.             color: white;
    469.             padding: 8px 16px;
    470.             border-radius: 8px;
    471.             font-weight: 500;
    472.             transition: all 0.2s;
    473.             font-size: 0.9rem;
    474.         }
    475.         
    476.         input[type="file"] {
    477.             position: absolute;
    478.             top: 0;
    479.             left: 0;
    480.             width: 100%;
    481.             height: 100%;
    482.             opacity: 0;
    483.             cursor: pointer;
    484.         }
    485.         
    486.         /* 计数器样式 */
    487.         .counter-container {
    488.             display: flex;
    489.             flex-direction: column;
    490.             gap: 8px;
    491.         }
    492.         
    493.         .counter-input {
    494.             display: flex;
    495.             align-items: center;
    496.             gap: 10px;
    497.         }
    498.         
    499.         .counter-input input {
    500.             flex: 1;
    501.             padding: 12px;
    502.             border: 2px solid var(--border-color);
    503.             border-radius: 10px;
    504.             font-size: 1rem;
    505.             text-align: center;
    506.             transition: border-color 0.2s;
    507.             -webkit-appearance: none;
    508.         }
    509.         
    510.         .counter-input input:focus {
    511.             border-color: var(--primary-color);
    512.             outline: none;
    513.         }
    514.         
    515.         .counter-btn {
    516.             width: 40px;
    517.             height: 40px;
    518.             border-radius: 50%;
    519.             background: var(--primary-color);
    520.             color: white;
    521.             border: none;
    522.             font-size: 1.1rem;
    523.             cursor: pointer;
    524.             display: flex;
    525.             align-items: center;
    526.             justify-content: center;
    527.             transition: all 0.2s;
    528.         }
    529.         
    530.         .counter-btn:active {
    531.             transform: scale(0.95);
    532.         }
    533.         
    534.         /* 提交按钮 */
    535.         .submit-btn {
    536.             background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    537.             color: white;
    538.             border: none;
    539.             padding: 14px 0;
    540.             border-radius: 12px;
    541.             font-size: 1.1rem;
    542.             font-weight: 600;
    543.             cursor: pointer;
    544.             width: 100%;
    545.             transition: all 0.2s;
    546.             box-shadow: 0 4px 12px rgba(26, 42, 108, 0.2);
    547.             display: flex;
    548.             align-items: center;
    549.             justify-content: center;
    550.             gap: 8px;
    551.         }
    552.         
    553.         .submit-btn:active {
    554.             transform: translateY(1px);
    555.         }
    556.         
    557.         /* 结果区域 */
    558.         .result-section {
    559.             background: var(--card-bg);
    560.             border-radius: 14px;
    561.             padding: 20px;
    562.             margin-bottom: 20px;
    563.             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    564.             border: 1px solid var(--border-color);
    565.             display: none;
    566.         }
    567.         
    568.         .result-section.active {
    569.             display: block;
    570.         }
    571.         
    572.         .link-box {
    573.             background: #f0f4f8;
    574.             border-radius: 12px;
    575.             padding: 16px;
    576.             margin-top: 15px;
    577.             border: 2px dashed var(--border-color);
    578.         }
    579.         
    580.         .link-box p {
    581.             font-size: 0.95rem;
    582.             margin-bottom: 12px;
    583.             color: var(--primary-color);
    584.             font-weight: 500;
    585.         }
    586.         
    587.         .link-input {
    588.             display: flex;
    589.             flex-direction: column;
    590.             gap: 10px;
    591.         }
    592.         
    593.         .link-input input {
    594.             flex: 1;
    595.             padding: 12px;
    596.             border: 2px solid var(--border-color);
    597.             border-radius: 10px;
    598.             font-size: 0.9rem;
    599.             background: white;
    600.             width: 100%;
    601.         }
    602.         
    603.         .copy-btn {
    604.             background: var(--primary-color);
    605.             color: white;
    606.             border: none;
    607.             padding: 12px;
    608.             border-radius: 8px;
    609.             cursor: pointer;
    610.             transition: all 0.2s;
    611.             font-weight: 500;
    612.             font-size: 0.95rem;
    613.         }
    614.         
    615.         .copy-btn:active {
    616.             transform: scale(0.98);
    617.         }
    618.         
    619.         /* 信息卡片 */
    620.         .info-section {
    621.             background: var(--card-bg);
    622.             border-radius: 14px;
    623.             padding: 20px;
    624.             margin-bottom: 20px;
    625.             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    626.             border: 1px solid var(--border-color);
    627.         }
    628.         
    629.         .info-grid {
    630.             display: grid;
    631.             grid-template-columns: 1fr 1fr;
    632.             gap: 12px;
    633.             margin-top: 15px;
    634.         }
    635.         
    636.         .info-card {
    637.             background: #f8fafc;
    638.             border-radius: 10px;
    639.             padding: 15px;
    640.             text-align: center;
    641.             border-left: 3px solid var(--primary-color);
    642.         }
    643.         
    644.         .info-card i {
    645.             font-size: 1.8rem;
    646.             color: var(--primary-color);
    647.             margin-bottom: 10px;
    648.         }
    649.         
    650.         .info-card h3 {
    651.             font-size: 0.95rem;
    652.             margin-bottom: 5px;
    653.             color: var(--primary-color);
    654.         }
    655.         
    656.         .info-card p {
    657.             font-size: 0.8rem;
    658.             color: var(--light-text);
    659.         }
    660.         
    661.         /* 错误提示 */
    662.         .error {
    663.             background: #fff5f5;
    664.             color: var(--error-color);
    665.             padding: 12px;
    666.             border-radius: 8px;
    667.             margin-top: 15px;
    668.             border-left: 3px solid var(--error-color);
    669.             display: flex;
    670.             align-items: center;
    671.             gap: 8px;
    672.             font-size: 0.9rem;
    673.         }
    674.         
    675.         /* 页脚 */
    676.         .app-footer {
    677.             text-align: center;
    678.             padding: 15px 20px;
    679.             background: #f8f9fa;
    680.             color: var(--light-text);
    681.             font-size: 0.8rem;
    682.             border-top: 1px solid var(--border-color);
    683.         }
    684.         
    685.         /* 响应式调整 */
    686.         @media (min-width: 500px) {
    687.             .app-container {
    688.                 max-width: 500px;
    689.                 margin: 10px auto;
    690.                 border-radius: 16px;
    691.                 overflow: hidden;
    692.                 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    693.                 min-height: calc(100vh - 20px);
    694.             }
    695.             
    696.             .link-input {
    697.                 flex-direction: row;
    698.             }
    699.             
    700.             .copy-btn {
    701.                 width: auto;
    702.                 padding: 12px 20px;
    703.             }
    704.         }
    705.         
    706.         /* 动画效果 */
    707.         @keyframes fadeIn {
    708.             from { opacity: 0; transform: translateY(10px); }
    709.             to { opacity: 1; transform: translateY(0); }
    710.         }
    711.         
    712.         .fade-in {
    713.             animation: fadeIn 0.3s ease-out forwards;
    714.         }
    715.     </style>
    716. </head>
    717. <body>
    718.     <div class="app-container">
    719.         <header class="app-header">
    720.             <div class="header-icon">
    721.                 <i class="fas fa-fire"></i>
    722.             </div>
    723.             <h1>阅后自焚图片分享</h1>
    724.             <p>上传图片并设置访问次数，达到次数后自动销毁</p>
    725.         </header>
    726.         
    727.         <main class="main-content">
    728.             <section class="upload-section fade-in">
    729.                 <h2 class="section-title">
    730.                     <i class="fas fa-cloud-upload-alt"></i>
    731.                     <span>上传图片</span>
    732.                 </h2>
    733.                
    734.                 <form method="POST" enctype="multipart/form-data" id="upload-form">
    735.                     <div class="form-group">
    736.                         <label for="file">选择图片文件</label>
    737.                         <div class="file-input" id="file-input-area">
    738.                             <div id="file-initial-view">
    739.                                 <i class="fas fa-file-image"></i>
    740.                                 <p>点击或拖拽文件到此处</p>
    741.                                 <span class="btn">选择文件</span>
    742.                             </div>
    743.                             <div id="file-selected-view" style="display: none;">
    744.                                 <i class="fas fa-check-circle" style="color: var(--success-color);"></i>
    745.                                 <p id="file-name-display"></p>
    746.                                 <span class="btn">重新选择</span>
    747.                             </div>
    748.                             <input type="file" name="file" id="file" required accept="image/*">
    749.                         </div>
    750.                     </div>
    751.                     
    752.                     <div class="form-group">
    753.                         <label for="views">设置最大访问次数 (1-999)</label>
    754.                         <div class="counter-container">
    755.                             <div class="counter-input">
    756.                                 <button type="button" class="counter-btn minus">-</button>
    757.                                 <input type="number" name="views" id="views" value="1" min="1" max="999" required>
    758.                                 <button type="button" class="counter-btn plus">+</button>
    759.                             </div>
    760.                             <small style="color: var(--light-text);">达到设定次数后文件将自动销毁</small>
    761.                         </div>
    762.                     </div>
    763.                     
    764.                     <?php if (!empty($error)): ?>
    765.                         <div class="error">
    766.                             <i class="fas fa-exclamation-circle"></i>
    767.                             <span><?= htmlspecialchars($error) ?></span>
    768.                         </div>
    769.                     <?php endif; ?>
    770.                     
    771.                     <button type="submit" class="submit-btn">
    772.                         <i class="fas fa-fire"></i> 生成自焚链接
    773.                     </button>
    774.                 </form>
    775.             </section>
    776.             
    777.             <section class="result-section <?= !empty($link) ? 'active fade-in' : '' ?>">
    778.                 <h2 class="section-title">
    779.                     <i class="fas fa-link"></i>
    780.                     <span>分享链接</span>
    781.                 </h2>
    782.                
    783.                 <p>您的图片已上传成功！此链接在访问 <strong><?= isset($maxViews) ? $maxViews : 1 ?></strong> 次后将自动销毁。</p>
    784.                
    785.                 <div class="link-box">
    786.                     <p>复制以下链接分享给他人：</p>
    787.                     <div class="link-input">
    788.                         <input type="text" id="generated-link" value="<?= !empty($link) ? htmlspecialchars($link) : '' ?>" readonly>
    789.                         <button class="copy-btn" id="copy-btn">复制链接</button>
    790.                     </div>
    791.                 </div>
    792.             </section>
    793.             
    794.             <section class="info-section fade-in">
    795.                 <h2 class="section-title">
    796.                     <i class="fas fa-info-circle"></i>
    797.                     <span>使用说明</span>
    798.                 </h2>
    799.                
    800.                 <div class="info-grid">
    801.                     <div class="info-card">
    802.                         <i class="fas fa-upload"></i>
    803.                         <h3>上传图片</h3>
    804.                         <p>选择要分享的图片</p>
    805.                     </div>
    806.                     
    807.                     <div class="info-card">
    808.                         <i class="fas fa-cog"></i>
    809.                         <h3>设置次数</h3>
    810.                         <p>设置允许访问次数</p>
    811.                     </div>
    812.                     
    813.                     <div class="info-card">
    814.                         <i class="fas fa-share-alt"></i>
    815.                         <h3>分享链接</h3>
    816.                         <p>复制生成的链接</p>
    817.                     </div>
    818.                     
    819.                     <div class="info-card">
    820.                         <i class="fas fa-fire"></i>
    821.                         <h3>自动销毁</h3>
    822.                         <p>达到次数自动删除</p>
    823.                     </div>
    824.                 </div>
    825.             </section>
    826.         </main>
    827.         
    828.         <footer class="app-footer">
    829.             <p>© <?= date('Y') ?> 阅后自焚图片分享系统 | 所有文件将在达到访问次数后自动销毁</p>
    830.         </footer>
    831.     </div>
    832.    
    833.     <script>
    834.         // 计数器功能
    835.         const minusBtn = document.querySelector('.minus');
    836.         const plusBtn = document.querySelector('.plus');
    837.         const viewsInput = document.getElementById('views');
    838.         
    839.         minusBtn.addEventListener('click', function() {
    840.             let value = parseInt(viewsInput.value) || 1;
    841.             if (value > 1) {
    842.                 viewsInput.value = value - 1;
    843.             }
    844.         });
    845.         
    846.         plusBtn.addEventListener('click', function() {
    847.             let value = parseInt(viewsInput.value) || 1;
    848.             if (value < 999) {
    849.                 viewsInput.value = value + 1;
    850.             }
    851.         });
    852.         
    853.         // 文件上传区域交互
    854.         const fileInput = document.getElementById('file');
    855.         const fileInputArea = document.getElementById('file-input-area');
    856.         const fileInitialView = document.getElementById('file-initial-view');
    857.         const fileSelectedView = document.getElementById('file-selected-view');
    858.         const fileNameDisplay = document.getElementById('file-name-display');
    859.         
    860.         fileInput.addEventListener('change', function() {
    861.             if (this.files.length > 0) {
    862.                 const fileName = this.files[0].name;
    863.                 const displayName = fileName.length > 20
    864.                     ? fileName.substring(0, 17) + '...'
    865.                     : fileName;
    866.                
    867.                 // 显示已选文件视图，隐藏初始视图
    868.                 fileInitialView.style.display = 'none';
    869.                 fileSelectedView.style.display = 'block';
    870.                 fileNameDisplay.textContent = displayName;
    871.                
    872.                 // 更新UI样式
    873.                 fileInputArea.style.borderColor = 'var(--success-color)';
    874.                 fileInputArea.style.backgroundColor = '#f0fff4';
    875.             }
    876.         });
    877.         
    878.         // 重新选择功能
    879.         fileSelectedView.addEventListener('click', function(e) {
    880.             if (e.target.classList.contains('btn')) {
    881.                 // 触发文件选择对话框
    882.                 fileInput.click();
    883.             }
    884.         });
    885.         
    886.         // 拖拽上传功能
    887.         fileInputArea.addEventListener('dragover', (e) => {
    888.             e.preventDefault();
    889.             fileInputArea.style.borderColor = 'var(--primary-color)';
    890.             fileInputArea.style.backgroundColor = '#edf2f7';
    891.         });
    892.         
    893.         fileInputArea.addEventListener('dragleave', () => {
    894.             fileInputArea.style.borderColor = 'var(--border-color)';
    895.             fileInputArea.style.backgroundColor = '#f8fafc';
    896.         });
    897.         
    898.         fileInputArea.addEventListener('drop', (e) => {
    899.             e.preventDefault();
    900.             fileInputArea.style.borderColor = 'var(--border-color)';
    901.             fileInputArea.style.backgroundColor = '#f8fafc';
    902.             
    903.             if (e.dataTransfer.files.length) {
    904.                 fileInput.files = e.dataTransfer.files;
    905.                 const event = new Event('change');
    906.                 fileInput.dispatchEvent(event);
    907.             }
    908.         });
    909.         
    910.         // 复制链接功能
    911.         const copyBtn = document.getElementById('copy-btn');
    912.         if (copyBtn) {
    913.             copyBtn.addEventListener('click', function() {
    914.                 const linkInput = document.getElementById('generated-link');
    915.                 linkInput.select();
    916.                 document.execCommand('copy');
    917.                
    918.                 const originalText = copyBtn.textContent;
    919.                 copyBtn.textContent = '已复制!';
    920.                 copyBtn.style.background = 'var(--success-color)';
    921.                
    922.                 setTimeout(() => {
    923.                     copyBtn.textContent = originalText;
    924.                     copyBtn.style.background = 'var(--primary-color)';
    925.                 }, 2000);
    926.             });
    927.         }
    928.         
    929.         // 如果有链接生成，滚动到结果区域
    930.         <?php if (!empty($link)): ?>
    931.             setTimeout(() => {
    932.                 document.querySelector('.result-section').scrollIntoView({
    933.                     behavior: 'smooth'
    934.                 });
    935.             }, 300);
    936.         <?php endif; ?>
    937.     </script>
    938. </body>
    复制代码
    MVP星源–发现最有趣的！https://www.mvpxo.com
    回复

    使用道具 举报

    返回列表 发布新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关于星源

    公告通知 投诉建议 申请申诉 联系星源

    服务支持

    旅游攻略 宠物心语 源码模板 行业资讯

    招募版主

    应邀申请 站长邮箱 免责声明
    • 手机网页版
    • 移动APP端
    Copyright © 2001-2025 MVP星源–发现最有趣的！ 版权所有 All Rights Reserved. 手机版|小黑屋|站点统计|Archiver|网站地图|闽ICP备12007159号-8|闽公网安备35021202000806号
    关灯 在本版发帖
    扫一扫访问移动端
     QQ客服返回顶部
    快速回复 返回顶部 返回列表