利用js判断文件是否为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 判断文件是否存在(转载)
js 判断文件是否存在(转载) var fso,s=filespec; // filespec="C:/path/myfile.txt"fso=new ActiveXObject ...
- 如何利用JS判断当前来路域名并跳转到指定页面
1.如何利用JS判断当前来路域名并跳转到指定页面 获取当前请求路径var href = location.href ;if(href.indexOf("baidu")>-1) ...
- js判断文件是否存在的方法
在做电力监控项目的时候,有一个需求就是左右布局的框架,点击左边的图形文件地址,然后去文件夹中找到文件,再在右边出现对应的图形文件,但是有些文件可能是配置的时候有问题,找不到文件,所以js需要判断,以下 ...
- js判断文件类型大小并给出提示
上传文件是工作中常用的功能,不同的场景对不同的文件类型和文件大小都有不同的要求: <form id="uploadForm" method="post" ...
- [转]客户端js判断文件类型和文件大小即限制上传大小
原文地址:https://www.jb51.net/article/43498.htm 需要脚本在客户端判断大小和文件类型,由于网上没有适合的,就自己写了一个并测试 文件上传大小限制的一个例子,在此与 ...
- 利用javascript判断文件是否存在
1 判断本地文件是否存在 var fso,s=filespec; // filespec="C:/path/myfile.txt" fso=new ActiveXObject(&q ...
- 客户端js判断文件类型和文件大小即限制上传大小
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 利用JS判断浏览器种类
现在浏览器很多,写代码的时候常常存在兼容性问题,所以判断用户使用的浏览器很重要.userAgent带有浏览器的种类及版本号等信息,所以可以通过userAgent属性来判断.一些冷门的浏览器,可以通过打 ...
- 利用JS判断当前来路域名并跳转到指定页面
某网站绑定了多个域名,默认情况下访问这些域名的时候是指向网站的首页,也就是访问不同域名时看到的页面是一样的,现在需要访问不同域名时显示不同页面. 一般情况下,可以用子站绑定域名的方法来实现,访问不同的 ...
随机推荐
- 使用docker快速安装软件
安装mysql mkdir /opt/mysql /opt/mysql/etc /opt/mysql/data docker run -itd --name mariadb -e MYSQL_ROOT ...
- JDK8新特性(二) 流式编程Stream
流式编程是1.8中的新特性,基于常用的四种函数式接口以及Lambda表达式对集合类数据进行类似流水线一般的操作 流式编程分为大概三个步骤:获取流 → 操作流 → 返回操作结果 流的获取方式 这里先了解 ...
- PAT归纳总结——关于图的一些总结
在刷题的过程中经常会碰到一些关于图论的问题,下面我将根据自己刷题的经验来对这些问题做一个总结. 图的表示方法 解决图论中的问题首先要解决的问题就是图的表示方法这一问题,图的表示方法主要有两种,一种使用 ...
- dex文件格式学习
一.dex文件的生成 我们可以通过java文件来生成一个简单的dex文件 编译过程: 首先编写java代码如下: (1) 编译成 java class 文件 执行命令 : javac Hello.ja ...
- Windows核心编程 第27章 硬件输入模型和局部输入状态
第27章 硬件输入模型和局部输入状态 这章说的是按键和鼠标事件是如何进入系统并发送给适当的窗口过程的.微软设计输入模型的一个主要目标就是为了保证一个线程的动作不要对其他线程的动作产生不好的影响. 27 ...
- SQLyog连接数据库报错 plugin caching_sha2_password could not be loaded
错误如图所示: 问题描述: 下载新版的 mysql 8.0.11 安装. 为了方便安装查看,我下载了sqlyog 工具 连接 mysql. 配置新连接报错:错误号码 2058 问题分析: mysql ...
- thinkphp 中区块block和模板继承extend用法举例
1.介绍 模板继承其实并不难理解,就好比类的继承一样,模板也可以定义一个基础模板(或者是布局),并且其中定义相关的区块(block),然后继承(extend)该基础模板的子模板中就可以对基础模板中定义 ...
- JavaScript中DOM与BOM的区别
1.BOM BOM全称为Brower Object Model,中文翻译为浏览器对象模型,提供了独立于内容而与浏览器窗口进行交互的对象.描述了与浏览器进行交互的方法和接口.通过BOM可以用来获取或设置 ...
- ElasticSearch第三弹之存储原理
我们上文中介绍的ES内部索引的写处理流程是在ES的内存中执行的,而数据被分配到特定的主.副分片上之后,最终是存储到磁盘上的,这样在断电的时候就不会丢失数据.具体的存储路径可在配置文件 ../confi ...
- MySQL之数据定义语言(DDL)
写在前面 本文中 [ 内容 ] 代表啊可选项,即可写可不写. SQL语言的基本功能介绍 SQL是一种结构化查询语言,主要有如下几个功能: 数据定义语言(DDL):全称Data Definition L ...