操作完成后如何停止微调器

Question

我正在使用 Flask 构建我的第一个 Web 应用程序。我是 html/ JavaScript/ CSS 新手 - 请多多包涵。

应用程序执行以下操作：用户上传 Excel 文件如下：

<form method="POST" enctype="multipart/form-data">
  <input type="file" name="file" id="file" />

然后他们使用下拉列表选择某些参数。当用户点击“提交”时，使用 pandas 操作数据，并在 Excel 中导出一个新文件。

我设法使用 html 和 CSS 向“提交”按钮添加了一个微调器。我在我的 JavaScript 中添加了一个事件侦听器，以便在单击按钮时激活微调器。目前，微调器无限期地运行，但是我希望微调器停止并且按钮文本在操作完成后恢复为“提交”，即导出完成。有谁知道我如何做到这一点？

这是我的html：

    <button type="submit" id="submit" class="button">
        <span class="button__text">Submit</span>
    </button>

这是我的 CSS：

    <style>
        .button {
          position: relative;
          padding: 8px 16px;
          background: #009579;
          border: none;
          outline: none;
          border-radius: 2px;
          cursor: pointer;
        }

        .button:active {
          background: #007a63;
        }

        .button__text {
          font: bold 20px "Quicksand", san-serif;
          color: #ffffff;
          transition: all 0.2s;
        }

        .button--loading .button__text {
          visibility: hidden;
          opacity: 0;
        }

        .button--loading::after {
          content: "";
          position: absolute;
          width: 16px;
          height: 16px;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          border: 4px solid transparent;
          border-top-color: #ffffff;
          border-radius: 50%;
          animation: button-loading-spinner 1s ease infinite;
        }

        /*animate spinner - spin from 0 to 1 turn*/
        @keyframes button-loading-spinner {
            from {
                transform: rotate(0turn);
            }

            to {
                transform: rotate(1turn);
            }

    </style>

这是我的 JavaScript：

    <script type="text/javascript">
            (() => {
            const elem = document.getElementById('submit');
            elem.disabled = false;
            elem.addEventListener('click', e=> {
                elem.classList.add('button--loading');
                });
            })();
    </script>

Answer 1

基本上，您的前端（HTML/Javascript）需要某种方式知道“导出完成”的时间。取决于您对“导出”和“完成”的定义。

在最基本的层面上，您可以让前端在上传开始后每秒轮询一次服务器，并让服务器返回某种关于进程状态的状态。这可能很简单：

GET /status/1234

> {"status": "IN_PROGRESS"}

其中，当“导出完成”切换到：

> {"status": "COMPLETE"}

当前端收到 COMPLETE 状态时，它会移除微调器。注意1234。您将需要某种方式来识别正在进行的上传。一种方法是在您第一次接受表单时为其分配一个随机 id，因此初始的 POST /upload 返回 > {'id': 1234}，然后客户端可以将其用于后续轮询。

如果“导出完成”实际上只表示文件已完成上传，您仍然可以使用轮询方法，但更巧妙的方法是使用客户端（Web 浏览器）方法来确定已发送多少字节（见this SO answer）。