文件上传

本示例展示如何创建一个通过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>
            上传
        </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>
            上传
        </button>
        <progress id='progress' value='0' max='100'></progress>
    </form>

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