js判断文件是否为utf-8编码的方法

 更新时间:2021年06月03日 08:35:37   作者:tornoda  
使用FileReader以utf-8格式读取文件,根据文件内容是否包含乱码字符,来判断文件是否为utf-8,本文就详细的介绍一下使用,感兴趣的小伙伴们可以参考一下

常规方案

使用FileReader以utf-8格式读取文件,根据文件内容是否包含乱码字符�,来判断文件是否为utf-8。

如果存在�,即文件编码非utf-8,反之为utf-8。

代码如下:

const isUtf8 = async (file: File) => {
  return await new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsText(file);

    reader.onloadend = (e: any): void => {
      const content = e.target.result;
      const encodingRight = content.indexOf("") === -1;

      if (encodingRight) {
        resolve(encodingRight);
      } else {
        reject(new Error("编码格式错误,请上传 UTF-8 格式文件"));
      }
    };
    
    reader.onerror = () => {
      reject(new Error("文件内容读取失败,请检查文件是否损坏"));
    };
  });
};

该方法问题在于,如果文件非常大,比如几个G,浏览器读到的内容直接放在内存中,fileReader实例会直接触发onerror,抛出错误,有时浏览器会直接崩溃。

大文件方案

对于大文件,可以对文件内容进行抽样,对文件进行切片,这里使用100片。对切出的每片文件再切取前面1kb大小的片段,以string方式读取。如果1024B可能正好切在某个汉字编码的中间,导致以string方式读取时出错,即首尾可能出现�,被认为是非utf-8片段。这时可以取1kb对应字符串的前半段,再去判断�是否存在。

上述常数可以根据需求进行调整。

代码如下:

const getSamples = (file: File) => {
  const filesize = file.size;
  const parts: Blob[] = [];
  if (filesize < 50 * 1024 * 1024) {
    parts.push(file);
  } else {
    let total = 100;
    const sampleSize = 1024 * 1024;
    const chunkSize = Math.floor(filesize / total);
    let start = 0;
    let end = sampleSize;
    while (total > 1) {
      parts.push(file.slice(start, end));
      start += chunkSize;
      end += chunkSize;
      total--;
    }
  }
  return parts;
};

const isUtf8 = (filePart: Blob) => {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();

    fileReader.readAsText(filePart);

    fileReader.onload = (e) => {
      const str = e.target?.result as string;
      // 大致取一半
      const sampleStr = str?.slice(4, 4 + str?.length / 2);
      if (sampleStr.indexOf("�") === -1) {
        resolve(void 0);
      } else {
        reject(new Error(编码格式错误,请上传 UTF-8 格式文件"));
      }
    };

    fileReader.onerror = () => {
      reject(new Error(文件内容读取失败,请检查文件是否损坏"));
    };
  });
};

export default async function (file: File) {
  const samples = getSamples(file);
  let res = true;

  for (const filePart of samples) {
    try {
      await isUtf8(filePart);
    } catch (error) {
      res = false;
      break;
    }
  }
  return res;
}

到此这篇关于js判断文件是否为utf-8编码的方法的文章就介绍到这了,更多相关js判断utf-8内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js中判断两个数组对象是否完全相等

    js中判断两个数组对象是否完全相等

    这篇文章主要介绍了js中判断两个数组对象是否完全相等方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 微信小程序 websocket 实现SpringMVC+Spring+Mybatis

    微信小程序 websocket 实现SpringMVC+Spring+Mybatis

    这篇文章主要介绍了 微信小程序websocket实现SpringMVC+Spring+Mybatis的相关资料,这里提供实现思路及实现代码,需要的朋友可以参考下
    2017-08-08
  • js生成随机数方法和实例

    js生成随机数方法和实例

    这篇文章主要介绍了js生成随机数方法和实例,由js生成一切随机数的基础都是Math.random(),有兴趣的可以了解一下。
    2017-01-01
  • JavaScript 中的单例内置对象Global 与 Math

    JavaScript 中的单例内置对象Global 与 Math

    这篇文章主要介绍了JavaScript 中的单例内置对象Global与Math,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-07-07
  • 微信小程序实现的贪吃蛇游戏【附源码下载】

    微信小程序实现的贪吃蛇游戏【附源码下载】

    这篇文章主要介绍了微信小程序实现的贪吃蛇游戏,结合实例形式分析了微信小程序实现贪吃蛇游戏功能的相关界面布局与代码逻辑操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2018-01-01
  • JavaScript 继承详解 第一篇

    JavaScript 继承详解 第一篇

    几乎每个开发人员都有面向对象语言(比如C++、C#、Java)的开发经验。 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例。
    2009-08-08
  • JS中的函数与对象的创建方式

    JS中的函数与对象的创建方式

    这篇文章主要介绍了JS中的函数与对象的创建方式,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 原生js实现分页效果

    原生js实现分页效果

    这篇文章主要为大家详细介绍了原生js实现分页效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JavaScript查看代码运行效率console.time()与console.timeEnd()用法

    JavaScript查看代码运行效率console.time()与console.timeEnd()用法

    今天小编就为大家分享一篇关于JavaScript查看代码运行效率console.time()与console.timeEnd()用法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • BootStrap实现轮播图效果(收藏)

    BootStrap实现轮播图效果(收藏)

    这篇文章主要介绍了BootStrap实现轮播图效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12

最新评论