表单错误后保留文件输入

在使用服务器端错误处理和验证包含基本值和文件输入的表单时，当表单返回错误消息时，文件输入的值会丢失。因此，用户需要重新上传文件，导致用户体验不佳。

为了解决在简单情况下文件输入值丢失的问题，您可以采用以下方法

之前

<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 来增强二进制文件输入。这种链接将二进制文件输入与表单关联起来，即使它位于表单元素之外。