增加手机上传图片的功能

2026-05-25 12:00:06 +08:00
parent f754386695
commit 02e2ca90a7
4 changed files with 220 additions and 3 deletions
--- a/web/templates/mobile_upload.html
+++ b/web/templates/mobile_upload.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<title>支付截图上传</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+<style>
+body { background: #f5f7fa; padding-bottom: 40px; }
+.header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 20px 16px; text-align: center; }
+.upload-btn { width: 100%; padding: 18px; font-size: 16px; border-radius: 12px; margin-top: 16px; }
+.img-preview { width: 100px; height: 100px; object-fit: cover; border-radius: 8px; margin: 4px; }
+.file-card { background: #fff; border-radius: 8px; padding: 8px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
+.file-card img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; }
+.file-card .info { flex: 1; min-width: 0; }
+.file-card .name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.file-card .remove { color: #c00; cursor: pointer; padding: 4px 8px; }
+.status-msg { text-align: center; padding: 12px; font-size: 14px; }
+</style>
+</head>
+<body>
+
+{% if error %}
+<div class="header"><h5>错误</h5><p>{{ error }}</p></div>
+{% else %}
+
+<div class="header">
+  <h5>📸 支付截图上传</h5>
+  <p class="mb-0 opacity-75" style="font-size:13px">拍照或从相册选择图片</p>
+</div>
+
+<div class="container" style="max-width:480px">
+
+  <!-- 上传按钮 -->
+  <input type="file" id="file-input" accept="image/*" multiple hidden onchange="handleSelect(this)">
+
+  <button class="btn btn-primary upload-btn" onclick="document.getElementById('file-input').click()">
+    📷 选择图片 / 拍照
+  </button>
+
+  <!-- 上传进度 -->
+  <div id="upload-status" class="status-msg mt-3"></div>
+
+  <!-- 已上传图片列表 -->
+  <h6 class="mt-3 mb-2">已上传 ({{ server_count | default(0) }})</h6>
+  <div id="file-list"></div>
+
+</div>
+{% endif %}
+
+<script>
+const sessionId = "{{ session_id }}";
+
+// ---- 加载已有文件 ----
+async function loadFiles() {
+  try {
+    const r = await fetch(`/api/files/${sessionId}`);
+    const d = await r.json();
+    renderList(d.images || []);
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+function renderList(images) {
+  const box = document.getElementById('file-list');
+  if (!images.length) {
+    box.innerHTML = '<p class="text-muted text-center" style="font-size:13px">暂无图片</p>';
+    return;
+  }
+  box.innerHTML = images.map(name => `
+    <div class="file-card">
+      <img src="/api/download/${sessionId}/${encodeURIComponent(name)}#t=image/png" alt="">
+      <div class="info"><div class="name">${name}</div></div>
+      <span class="remove" onclick="removeFile('${name}')">&times;</span>
+    </div>
+  `).join('');
+}
+
+// ---- 上传 ----
+async function handleSelect(input) {
+  const files = Array.from(input.files);
+  if (!files.length) return;
+
+  const status = document.getElementById('upload-status');
+  let done = 0;
+  status.innerHTML = `<div class="text-primary">上传中... 0/${files.length}</div>`;
+
+  for (const f of files) {
+    try {
+      const fd = new FormData();
+      fd.append('file', f);
+      await fetch(`/api/upload/${sessionId}`, { method: 'POST', body: fd });
+      done++;
+      status.innerHTML = `<div class="text-primary">上传中... ${done}/${files.length}</div>`;
+    } catch (e) {
+      status.innerHTML = `<div class="text-danger">${f.name} 上传失败</div>`;
+    }
+  }
+
+  if (done === files.length) {
+    status.innerHTML = `<div class="text-success">✅ ${done} 张图片上传成功</div>`;
+  } else {
+    status.innerHTML = `<div class="text-warning">${done}/${files.length} 张上传成功</div>`;
+  }
+
+  input.value = '';
+  loadFiles();
+}
+
+// ---- 删除（前端视觉移除，实际保留在服务器）----
+function removeFile(name) {
+  // 移动端暂不支持删除，提示用户回到 PC 端管理
+  if (confirm('文件已上传到服务器。如需删除请回到电脑端操作。')) {
+    loadFiles();
+  }
+}
+
+// ---- 定时刷新列表（同步 PC 端新增的文件）----
+setInterval(loadFiles, 5000);
+loadFiles();
+</script>
+</body>
+</html>