当使用包含原始值和文件输入的表单进行服务器端错误处理和验证时,如果表单返回错误消息,文件输入的值会丢失。这导致用户需要重新上传文件,降低了用户体验。
为了解决文件输入值丢失的问题,你可以在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">
<!-- 其他代码,如输入错误处理 -->
<button type="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">提交</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">提交</button>
</form>
表单重构:将二进制文件输入移到HTML结构中的主表单元素之外。
使用form属性:通过添加form属性并将其值设置为主表单的ID来增强二进制文件输入。这种关联使二进制文件输入与表单相关联,即使它位于表单元素之外。