文件上传

在这个例子中，我们展示了如何创建一个通过 ajax 提交的文件上传表单以及展示进度条。

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

首先是纯 javascript 版本。

我们使用 multipart/form-data 类型以便文件能够被正确编码
将表单指向至 /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 属性直接解析为变量。