完成文件上传链接生成功能

2025-08-18 07:50:24 +08:00 · 2023-12-19 17:31:30 +08:00
parent 42c764f825
commit ee9aeb4820
5 changed files with 218 additions and 19 deletions
--- a/Web/info.html
+++ b/Web/info.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>文件详细</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+  <style>
+    body {
+      font-family: 'Arial', sans-serif;
+      background-color: #f5f5f5;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+    }
+
+    header {
+      background-color: #333;
+      color: #fff;
+      text-align: center;
+      width: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+    }
+
+    #container {
+      width: 85%;
+      max-width: 800px;
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      margin-top: 80px;
+      /* 顶栏高度 + 20px 的间距 */
+      text-align: center;
+    }
+
+    #table-container {
+      display: flex;
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    #table-container table {
+      border: 1px solid #ddd;
+      border-radius: 5px;
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+      width: 100%;
+    }
+
+    #table-container tr:hover {
+      background-color: #f1f1f1;
+    }
+
+    #table-container td:first-child {
+      width: 20%;
+      height: 30px;
+    }
+
+    #table-container td:last-child {
+      width: 80%;
+    }
+
+    #imgshow {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+
+  <header>
+    <h2>Pixel</h2>
+    <!-- 添加帮助和用户信息的按钮/链接等 -->
+  </header>
+
+  <div id="container">
+    <div id="thumbnail-container">
+      <img id="imgshow" alt="缩略图">
+      <hr>
+      <div id="table-container">
+        <table id="linktable">
+          <tr>
+            <td>URL</td>
+            <td><span class="imgurl"></span></td>
+          </tr>
+          <tr>
+            <td>MarkDown</td>
+            <td>![alt](<span class="imgurl"></span>)</td>
+          </tr>
+          <tr>
+            <td>HTML</td>
+            <td>&lt;img src="<span class="imgurl"></span>" alt="img" /&gt;
+            </td>
+          </tr>
+          <tr>
+            <td>HTML</td>
+            <td>[img]<span class="imgurl"></span>[/img]
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    function GetRequest() {
+      var url = location.search; //获取url中"?"符后的字串
+      var theRequest = new Object();
+      if (url.indexOf("?") != -1) {
+        var str = url.substr(1);
+        strs = str.split("&");
+        for (var i = 0; i < strs.length; i++) {
+          theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
+        }
+      }
+      return theRequest;
+    }
+    const Resq = GetRequest();
+    linkid = Resq["id"]
+
+    imgurl = window.location.protocol + "//" + window.location.host + "/img?id=" + linkid
+    document.getElementById("imgshow").src = imgurl
+    var elements = document.getElementsByClassName("imgurl"); // 获取所有具有类名 "myClass" 的元素
+    for (var i = 0; i < elements.length; i++) {
+      elements[i].innerHTML = imgurl;
+    }
+  </script>
+
+</body>
+
+</html>