HTML加js实现计算文件哈希值,前端使用js计算文件的MD5值

最新推荐文章于 2024-09-25 11:24:04 发布

nlp小白菜

最新推荐文章于 2024-09-25 11:24:04 发布

阅读量1.8k

点赞数 1

文章标签： HTML加js实现计算文件哈希值

本文介绍了如何在前端使用HTML和JavaScript计算文件的MD5值，包括针对小文件直接计算和大文件分块计算的方法。通过FileReader的readAsBinaryString读取文件，结合SparkMD5库进行MD5哈希运算，确保文件的校验准确性。对于大文件，利用File的slice方法进行切片处理，提高计算效率。

摘要由CSDN通过智能技术生成

在前端开发时有时需要计算文件的 MD5 值传给后端用作比较文件的准确性和完整性。

还应用到了现代浏览器中都实现了的类 FileReader，它的实例的 readAsBinaryString 方法，用来读取文件的原始二进制数据。

创建HTML部分并引入插件

计算小文件的MD5值

document.querySelector('#file').addEventListener('change', e => {

const file = e.target.files[0];

const fileReader = new FileReader()

fileReader.readAsBinaryString(file);

fileReader.onload = e => {

const md5 = SparkMD5.hashBinary(e.target.result);

console.log(md5);

}

});

首先获取了上传的文件，然后用前面提到的 FileReader 实例的 readAsBinaryString 方法读取文件的二进制数据，当读取完成后会触发 onload 事件，用 e.target.result 获取二进制数据，传入SparkMD5 的 hashBinary 方法计算 MD5 值，打开控制台，可以看到计算出的最终 MD5 值：

bVbIkHr