htmx:xhr:progress

htmx:xhr:progress 是 HTMX 中的一个自定义事件，用于监听 AJAX 请求（XHR）传输过程中的“进度（progress）事件”，通常用于显示上传或下载进度条。

在发送 HTMX 请求时，如果该请求是通过 XHR（XMLHttpRequest） 发送的，并且支持进度监控（如上传文件），那么在数据传输过程中，HTMX 会触发该事件。

用于绑定监听器来实时更新上传/下载进度（如百分比或进度条）。

示例：上传文件并显示进度条

HTML + HTMX 代码：

<form 
  hx-post="/upload" 
  hx-encoding="multipart/form-data" 
  hx-trigger="change from:#file-input"
  hx-target="#result" 
  hx-indicator="#progress-bar">
  
  <input type="file" name="file" id="file-input" />
</form>

<div id="progress-container" style="width: 100%; border: 1px solid #ccc; margin-top: 10px;">
  <div id="progress-bar" style="height: 20px; width: 0%; background: green;"></div>
</div>

<div id="result"></div>

JavaScript 代码：

  document.body.addEventListener("htmx:xhr:progress", function(event) {
    const progressBar = document.getElementById("progress-bar");
    const loaded = event.detail.event.loaded;
    const total = event.detail.event.total;

    if (total > 0) {
      const percent = (loaded / total) * 100;
      progressBar.style.width = percent + "%";
    }
  });

注意事项：

• 仅对支持进度事件的请求有效（如 multipart/form-data 上传）

• 确保你的请求方式是 POST 或 PUT 并带有内容（上传文件等）

• 不适用于 GET 请求（无内容上传）