檔案上傳

在這個範例中，我們將展示如何建立一個檔案上傳表單，該表單將透過 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 中的屬性直接解構為變數