hx-encoding

hx-encoding 属性是用于设置请求的 Content-Type 编码格式的一个属性，允许你将请求编码从通常的 application/x-www-form-urlencoded 编码切换到 multipart/form-data。

用于支持 ajax 请求中的文件上传时，属性的值应该是 multipart/form-data。

该 hx-encoding 标签可以放置在父元素上。

示例代码

<form 
  hx-post="/submit" 
  hx-target="#result"
  hx-encoding="multipart/form-data"
>
  <input type="text" name="name" />
  <input type="file" name="avatar" />
  <button type="submit">提交</button>
</form>

<div id="result"></div>

hx-encoding="multipart/form-data" 会将数据以表单上传格式发送（常用于上传文件）；默认 HTMX 会使用 application/x-www-form-urlencoded；如果你上传文件或希望手动解析边界等，就要设置 multipart/form-data。

常见的编码类型

值	说明
application/x-www-form-urlencoded (默认)	普通表单格式（key1=value1&key2=value2），兼容性高
multipart/form-data	发送复杂表单数据，支持文件上传
text/plain	不常用，不会对数据进行 URL 编码
application/json	你必须自己在 htmx:configRequest 中手动处理 JSON 格式（HTMX 本身不会自动处理）

注意事项

• hx-encoding 只能影响请求头和编码方式，不会影响 DOM 结构或表单内容本身。

• 如果你使用 application/json，HTMX 并不会自动把表单序列化成 JSON，因此你需要监听 htmx:configRequest，并在其中自定义请求体。

• 上传文件时必须使用 multipart/form-data，否则服务器无法接收文件数据。