Upload 2 files
Browse files
app.py
CHANGED
|
@@ -101,7 +101,7 @@ HTML_TEMPLATE = """
|
|
| 101 |
<head>
|
| 102 |
<meta charset="UTF-8">
|
| 103 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 104 |
-
<title>My
|
| 105 |
<style>
|
| 106 |
* { margin: 0; padding: 0; box-sizing: border-box; }
|
| 107 |
body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
|
|
@@ -129,11 +129,15 @@ HTML_TEMPLATE = """
|
|
| 129 |
tr:hover { background: #f9f9f9; }
|
| 130 |
.hash { font-family: monospace; font-size: 12px; color: #666; }
|
| 131 |
.btn-small { padding: 6px 12px; font-size: 12px; margin: 0 2px; }
|
|
|
|
|
|
|
|
|
|
|
|
|
| 132 |
</style>
|
| 133 |
</head>
|
| 134 |
<body>
|
| 135 |
<div class="container">
|
| 136 |
-
<h1>My
|
| 137 |
|
| 138 |
<div class="auth-box">
|
| 139 |
<label>访问密码：</label>
|
|
@@ -150,7 +154,14 @@ HTML_TEMPLATE = """
|
|
| 150 |
<h2>上传图片</h2>
|
| 151 |
<div class="upload-area" onclick="document.getElementById('fileInput').click()">
|
| 152 |
<p>点击选择图片（支持多选）</p>
|
| 153 |
-
<input type="file" id="fileInput" multiple accept="image/*">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 154 |
</div>
|
| 155 |
<div>
|
| 156 |
<label>描述（可选）：</label>
|
|
@@ -182,6 +193,42 @@ HTML_TEMPLATE = """
|
|
| 182 |
event.target.classList.add('active');
|
| 183 |
}
|
| 184 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 185 |
async function uploadImages() {
|
| 186 |
const password = document.getElementById('password').value;
|
| 187 |
const files = document.getElementById('fileInput').files;
|
|
|
|
| 101 |
<head>
|
| 102 |
<meta charset="UTF-8">
|
| 103 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 104 |
+
<title>My图床</title>
|
| 105 |
<style>
|
| 106 |
* { margin: 0; padding: 0; box-sizing: border-box; }
|
| 107 |
body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
|
|
|
|
| 129 |
tr:hover { background: #f9f9f9; }
|
| 130 |
.hash { font-family: monospace; font-size: 12px; color: #666; }
|
| 131 |
.btn-small { padding: 6px 12px; font-size: 12px; margin: 0 2px; }
|
| 132 |
+
.file-list-item { padding: 8px; border-bottom: 1px solid #ddd; display: flex; align-items: center; }
|
| 133 |
+
.file-list-item:last-child { border-bottom: none; }
|
| 134 |
+
.file-icon { color: #007bff; margin-right: 10px; font-size: 18px; }
|
| 135 |
+
.file-size { color: #666; font-size: 12px; margin-left: 10px; }
|
| 136 |
</style>
|
| 137 |
</head>
|
| 138 |
<body>
|
| 139 |
<div class="container">
|
| 140 |
+
<h1>My图床</h1>
|
| 141 |
|
| 142 |
<div class="auth-box">
|
| 143 |
<label>访问密码：</label>
|
|
|
|
| 154 |
<h2>上传图片</h2>
|
| 155 |
<div class="upload-area" onclick="document.getElementById('fileInput').click()">
|
| 156 |
<p>点击选择图片（支持多选）</p>
|
| 157 |
+
<input type="file" id="fileInput" multiple accept="image/*" onchange="showSelectedFiles()">
|
| 158 |
+
</div>
|
| 159 |
+
<div id="selectedFiles" style="display:none; margin: 15px 0; padding: 15px; background: #f9f9f9; border-radius: 5px;">
|
| 160 |
+
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
| 161 |
+
<h3 style="margin: 0;">已选择 <span id="fileCount">0</span> 张图片（总计：<span id="totalSize">0</span> KB）</h3>
|
| 162 |
+
<button class="btn btn-small" onclick="clearSelection()">清空选择</button>
|
| 163 |
+
</div>
|
| 164 |
+
<ul id="fileList" style="list-style: none; padding: 0;"></ul>
|
| 165 |
</div>
|
| 166 |
<div>
|
| 167 |
<label>描述（可选）：</label>
|
|
|
|
| 193 |
event.target.classList.add('active');
|
| 194 |
}
|
| 195 |
|
| 196 |
+
function showSelectedFiles() {
|
| 197 |
+
const fileInput = document.getElementById('fileInput');
|
| 198 |
+
const files = fileInput.files;
|
| 199 |
+
const selectedDiv = document.getElementById('selectedFiles');
|
| 200 |
+
const fileList = document.getElementById('fileList');
|
| 201 |
+
|
| 202 |
+
if (files.length === 0) {
|
| 203 |
+
selectedDiv.style.display = 'none';
|
| 204 |
+
return;
|
| 205 |
+
}
|
| 206 |
+
|
| 207 |
+
let totalSize = 0;
|
| 208 |
+
fileList.innerHTML = '';
|
| 209 |
+
for (let i = 0; i < files.length; i++) {
|
| 210 |
+
totalSize += files[i].size;
|
| 211 |
+
const li = document.createElement('li');
|
| 212 |
+
li.className = 'file-list-item';
|
| 213 |
+
li.innerHTML = `
|
| 214 |
+
<span class="file-icon">📷</span>
|
| 215 |
+
<span style="flex: 1;">${files[i].name}</span>
|
| 216 |
+
<span class="file-size">(${(files[i].size / 1024).toFixed(2)} KB)</span>
|
| 217 |
+
`;
|
| 218 |
+
fileList.appendChild(li);
|
| 219 |
+
}
|
| 220 |
+
|
| 221 |
+
document.getElementById('fileCount').textContent = files.length;
|
| 222 |
+
document.getElementById('totalSize').textContent = (totalSize / 1024).toFixed(2);
|
| 223 |
+
selectedDiv.style.display = 'block';
|
| 224 |
+
}
|
| 225 |
+
|
| 226 |
+
function clearSelection() {
|
| 227 |
+
document.getElementById('fileInput').value = '';
|
| 228 |
+
document.getElementById('selectedFiles').style.display = 'none';
|
| 229 |
+
document.getElementById('fileList').innerHTML = '';
|
| 230 |
+
}
|
| 231 |
+
|
| 232 |
async function uploadImages() {
|
| 233 |
const password = document.getElementById('password').value;
|
| 234 |
const files = document.getElementById('fileInput').files;
|