在表单错误后保留文件输入

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

要解决文件输入值丢失的问题，您可以在 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 属性来管理这种情况。

或者，您可以通过重新构建表单，使文件输入位于将要交换的区域之外，从而在表单错误后保留文件输入。

Before:

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

After:

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