表单验证错误后保留文件输入

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

为了解决丢失文件输入值的问题，可以使用 input 元素上的 hx-preserve 属性：

<form method="POST" id="binaryForm" enctype="multipart/form-data" hx-swap="outerHTML" hx-target="#binaryForm">
    <input hx-preserve id="someId" type="file" name="binaryFile">
    <!-- Other code here, such as input error handling. -->
    <button type="submit">Submit</button>
</form>

如果文件字段返回错误，则只需要把 hx-preserve 放置在 input 中，而不是显示错误的元素（例如：ol.errorlist），就会显示错误。如果在特定情况下，你希望文件上传输入返回而不保留用户选择的文件（例如，因为文件类型无效），则可以在字段有相关错误时通过省略 hx-preserve 属性在服务器端进行管理。

或者，你可以通过重组表单来保留表单错误后的文件输入，以便文件输入位于将要交换的区域之外。

前：

<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>

表单重组：将二进制文件输入移至 HTML 结构中主表单元素之外。

使用 form 属性：通过添加 form 属性并将其值设置为主表单的 ID 来增强二进制文件输入。此链接将二进制文件输入与表单关联起来，即使它位于表单元素之外。