cellpose-web/frontend/index.html

<meta charset="UTF-8" />
<input id="fileInput" type="file" multiple />
<button id="uploadBtn">Upload</button>
<progress id="bar" max="100" value="0" style="width:300px;"></progress>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
const API = "http://10.147.18.141:5000/upload";

document.getElementById("uploadBtn").addEventListener("click", async () => {
  const input = document.getElementById("fileInput");
  if (!input.files.length) return alert("请选择文件");

  const fd = new FormData();
  for (const f of input.files) fd.append("files", f);

  const bar = document.getElementById("bar");
  try {
    const res = await axios.post(API, fd, {
      onUploadProgress: (e) => {
        if (e.total) bar.value = Math.round((e.loaded * 100) / e.total);
      },
      // 不要显式设置 Content-Type
    });
    alert("上传成功：" + JSON.stringify(res.data));
    window.location.href = `preview.html?id=${encodeURIComponent(res.data['id'])}`;
  } catch (e) {
    alert("上传失败：" + (e.response?.data?.message || e.message));
  } finally {
    bar.value = 0;
  }
});
</script>