表單錯誤後保留檔案輸入

當使用伺服器端錯誤處理和驗證，處理包含基本值和檔案輸入的表單時，當表單返回錯誤訊息時，檔案輸入的值會遺失。因此，使用者需要重新上傳檔案，導致使用者體驗不佳。

為了克服簡單情況下檔案輸入值遺失的問題，您可以採用以下方法：

之前

<form method="POST" id="binaryForm" enctype="multipart/form-data" hx-swap="outerHTML" hx-target="#binaryForm">
    <input type="file" name="binaryFile">
    <button type="submit">Submit</button>
</form>

之後

<input form="binaryForm" type="file" name="binaryFile">

<form method="POST" id="binaryForm" enctype="multipart/form-data" hx-swap="outerHTML" hx-target="#binaryForm">
    <button type="submit">Submit</button>
</form>

  1. 表單結構重組：將二進制檔案輸入移到 HTML 結構中主要表單元素之外。

  2. 使用 form 屬性：透過新增 form 屬性並將其值設定為主要表單的 ID 來增強二進制檔案輸入。即使二進制檔案輸入位於表單元素之外，這種連結也會將其與表單關聯起來。