HTML表单提交提示未声明字符编码（已配置编码仍报错）

问题根因 #

你遇到的字符编码报错本质是本地静态文件的默认表单提交逻辑触发的浏览器校验异常：

• 你的<form>标签没有配置action属性，默认会把表单内容提交到当前页面地址
• 如果你是直接通过file://协议打开的HTML文件，没有服务器返回的Content-Type响应头，浏览器处理表单提交的编码校验时，会忽略页面内的<meta>编码声明，误判为未配置编码
• 和你上传的JSON文件合法性、HTML头部的meta编码配置没有关系

可行解决方案 #

你选择的前端直接读取文件的方案是最合适的，完全绕开了不必要的表单提交逻辑，适合纯前端处理JSON文件的场景：
修改后的表单按钮代码示例：

<button id="form-btn" type="button" onclick="readFile()">Load File</button>

对应的readFile参考实现（可根据自身需求调整）：

function readFile() {
  const fileInput = document.getElementById('file-input')
  const selectedFile = fileInput.files[0]
  if (!selectedFile) return
  const reader = new FileReader()
  reader.onload = function(e) {
    try {
      const jsonData = JSON.parse(e.target.result)
      // 此处写入你处理JSON数据的逻辑
      console.log('读取到的JSON数据：', jsonData)
    } catch (err) {
      console.error('JSON解析失败：', err)
    }
  }
  reader.readAsText(selectedFile, 'utf-8')
}

如果你确实需要走表单提交到后端的逻辑，只需要给<form>标签添加accept-charset="utf-8"属性即可解决编码报错：

<form name="data-form" enctype="multipart/form-data" method="post" accept-charset="utf-8" action="你的后端接口地址">

内容的提问来源于stack exchange，提问作者nos codemos