如何使用JS获取文件编码格式 校验用户是否上传UTF-8编码文件

你当前仅通过判断BOM头识别UTF-8的方案存在天然缺陷：UTF-8的BOM不是强制标准，仅Windows平台部分编辑器会给UTF-8文件加BOM头，Mac、Linux平台生成的UTF-8文件默认都不带BOM，因此检测准确率极低。

以下是两种通用解决方案： #

方案1：使用第三方编码检测库（高准确率） #

推荐使用jschardet，纯JS实现，支持几十种常见编码的检测和置信度评估，能覆盖绝大多数业务场景：

// 引入jschardet库后使用
const reader = new FileReader();
reader.onload = function(e) {
  const detectRes = jschardet.detect(e.target.result);
  if (detectRes.encoding?.toLowerCase() === 'utf-8' && detectRes.confidence > 0.9) {
    console.log('文件为UTF-8编码，可正常解析');
  } else {
    alert(`请上传UTF-8编码的文件，当前检测编码为${detectRes.encoding || '未知'}`);
  }
}
reader.readAsBinaryString(file);

方案2：原生JS实现简易UTF-8校验（无第三方依赖） #

利用UTF-8编码的固定字节规则做合规性校验，普通场景下准确率足够：

// 校验字节流是否符合UTF-8编码规则
function isValidUtf8(buffer) {
  let i = 0;
  const length = buffer.length;
  while (i < length) {
    // 单字节UTF-8格式：0xxxxxxx
    if (buffer[i] < 0x80) {
      i++;
      continue;
    }
    // 多字节UTF-8首字节规则判断
    let byteLen;
    if (buffer[i] >= 0xC0 && buffer[i] <= 0xDF) byteLen = 2;
    else if (buffer[i] >= 0xE0 && buffer[i] <= 0xEF) byteLen = 3;
    else if (buffer[i] >= 0xF0 && buffer[i] <= 0xF7) byteLen = 4;
    else return false;
    // 后续字节必须符合10xxxxxxx格式
    for (let j = 1; j < byteLen; j++) {
      if (i + j >= length || (buffer[i + j] & 0xC0) !== 0x80) return false;
    }
    i += byteLen;
  }
  return true;
}

// 调用逻辑
const encodeReader = new FileReader();
encodeReader.onload = function (e) {
  const view = new Uint8Array(e.target.result);
  // 优先判断BOM头
  const hasBom = view.length >= 3 && view[0] === 0xEF && view[1] === 0xBB && view[2] === 0xBF;
  const contentBuffer = hasBom ? view.slice(3) : view;
  if (hasBom || isValidUtf8(contentBuffer)) {
    console.log('是UTF-8编码文件');
  } else {
    alert('请上传UTF-8编码的文件');
  }
};
encodeReader.readAsArrayBuffer(file);

注意事项 #

简易校验法无法区分刚好符合UTF-8编码规则的其他编码文件（比如纯ASCII内容的GBK文件），但这类文件用UTF-8解析也不会出现乱码，不影响正常使用。如果需要更高的识别准确率，建议使用专业的编码检测库。

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