文件上传

在本示例中，我们展示如何创建一个通过 AJAX 提交的文件上传表单，并附带一个进度条。

我们将展示两种不同的实现方式，一种使用纯 JavaScript（借助 htmx 中的一些实用方法），另一种使用 hyperscript。

首先是纯 JavaScript 版本。

• 我们有一个类型为 multipart/form-data 的表单，以便文件能够正确编码
• 我们将表单 POST 到 /upload
• 我们有一个 progress 元素
• 我们监听 htmx:xhr:progress 事件，并根据事件详情中的 loaded 和 total 属性更新进度条的 value 属性。

    <form id='form' hx-encoding='multipart/form-data' hx-post='/upload'>
        <input type='file' name='file'>
        <button>
            Upload
        </button>
        <progress id='progress' value='0' max='100'></progress>
    </form>
    <script>
        htmx.on('#form', 'htmx:xhr:progress', function(evt) {
          htmx.find('#progress').setAttribute('value', evt.detail.loaded/evt.detail.total * 100)
        });
    </script>

Hyperscript 版本非常相似，除了：

• 脚本直接嵌入到表单元素中
• Hyperscript 提供了更简洁的语法（尽管 htmx API 也相当不错！）

    <form hx-encoding='multipart/form-data' hx-post='/upload'
          _='on htmx:xhr:progress(loaded, total) set #progress.value to (loaded/total)*100'>
        <input type='file' name='file'>
        <button>
            Upload
        </button>
        <progress id='progress' value='0' max='100'></progress>
    </form>

请注意，hyperscript 允许您直接从 details 中解构属性到变量