mirror of
https://github.com/Kakune55/Pixel.git
synced 2025-05-06 18:29:25 +08:00
205 lines
5.1 KiB
Go
205 lines
5.1 KiB
Go
<!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%;
|
||
}
|
||
|
||
#delete-button {
|
||
background-color: #ff4444;
|
||
/* 红色背景 */
|
||
border: none;
|
||
color: white;
|
||
/* 白色文字 */
|
||
padding: 10px 20px;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
font-size: 16px;
|
||
margin: 4px 2px;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
/* 圆角边框 */
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||
/* 阴影效果 */
|
||
}
|
||
|
||
#delete-button:hover {
|
||
background-color: #ff0000;
|
||
/* 鼠标悬停时颜色加深 */
|
||
}
|
||
</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><img src="<span class="imgurl"></span>" alt="img" />
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>BBCode</td>
|
||
<td>[img]<span class="imgurl"></span>[/img]
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
<button id="delete-button" onclick="DelImg(linkid)">Del</button>
|
||
</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;
|
||
}
|
||
|
||
function DelImg(fileID) {
|
||
// 弹出确认框，询问是否要删除图片
|
||
var userConfirmation = confirm("是否要删除此图片？");
|
||
|
||
if (userConfirmation) {
|
||
// 如果用户确认删除，则请求输入文件ID
|
||
var userInput = prompt("请确认文件ID：");
|
||
|
||
// 验证输入的文件ID是否与传入的文件ID匹配
|
||
if (userInput === fileID) {
|
||
// 如果验证成功，则调用URL删除图片
|
||
var deleteURL = "/img/del?id=" + fileID;
|
||
|
||
// 使用XMLHttpRequest发送DELETE请求
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open("DELETE", deleteURL, true);
|
||
|
||
xhr.onreadystatechange = function () {
|
||
if (xhr.readyState == 4) {
|
||
if (xhr.status == 200) {
|
||
// 删除成功
|
||
alert("图片删除成功")
|
||
window.location.href="/upload"
|
||
} else {
|
||
// 删除失败
|
||
alert("删除图片失败：" + xhr.statusText);
|
||
}
|
||
}
|
||
};
|
||
|
||
// 发送请求
|
||
xhr.send();
|
||
} else {
|
||
// 如果验证失败，则取消操作
|
||
alert("文件ID验证失败，操作已取消。");
|
||
}
|
||
} else {
|
||
// 如果用户取消删除，则取消操作
|
||
alert("操作已取消。");
|
||
}
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |