html页面通过js计算文件的md5与sha256(基于crypto-js)

hero_lxz

已于 2024-04-11 16:08:15 修改

阅读量2.8k

点赞数 1

分类专栏：前端文章标签： javascript html 前端摘要计算

于 2022-01-17 13:53:50 首次发布

本文链接：https://blog.youkuaiyun.com/hero_lxz/article/details/122538347

版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript和crypto-js库计算文件的MD5和SHA256散列值的方法。通过分块读取文件并逐步更新散列值，实现了对大文件的有效处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源代码如下，将源代码保存到本地，调整引入的js文件路径即可使用(本文所使用的crypto-js版本为4.1.1)：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>计算MD5和SHA256</title>
<!--这一块需要自己按照自己本地的文件路径调整-->
<script type="text/javascript" src="crypto-js.js"></script>
</head>
<body>
    <input type="file" id="f"/>
	<button onclick="calmd5Test()">计算MD5</button>
	<button onclick="showSHA256()">计算SHA256</button>
	<p>当前进度：<span id="proc"></span></p>
	<p>结果：<span id="result"></span></p>
		<script>
			

			
			function getFileSHA256(file,progressCallback){
				return new Promise(function(resolve, reject) {
					//let fileInfo={};
					//fileInfo.name=file.name;
					//fileInfo.size=file.size;
					let sha256 = CryptoJS.algo.SHA256.create();
					let reader = new FileReader();
					let step = 1024* 1024*10;
					let total = file.size;
					let loaded = 0;
					//读取一段成功
					reader.onload = function (e) {
						//处理读取的结果
						let wordArray = CryptoJS.lib.WordArray.create(reader.result);
						sha256.update(wordArray);
						loaded += e.loaded;
						if(progressCallback){
							progressCallback(loaded/total);
						}
						//如果没有读完，继续
						if (loaded < total) {
							readBlob(loaded);
						} else {
							loaded = total;
							let sha256Value = sha256.finalize().toString();
							resolve(sha256Value);
						}
					}
					//开始读取
					readBlob(0);
					//指定开始位置，分块读取文件
					function readBlob(start) {
						//指定开始位置和结束位置读取文件
						let blob = file.slice(start, start + step);
						reader.readAsArrayBuffer(blob);
					}
				});
			}
			
			function showSHA256(){
				getFileSHA256(document.getElementById("f").files[0],(p)=>{
					document.getElementById('proc').innerText=Math.floor(p*100)+'%';
				}).then(finfo=>{
					document.getElementById("result").innerText=finfo;
				})
				
			}
			
			
			function calmd5Test(){
				let md5 = CryptoJS.algo.MD5.create();
				//获取文件对象
				let file = document.getElementById("f").files[0];
				let reader = new FileReader();
				let step = 1024* 1024;
				let total = file.size;
				let cuLoaded = 0;
				let time=1;
				console.info("文件大小：" + file.size);
				//读取一段成功
				reader.onload = function (e) {
					console.log("开始读取第"+time+"段");
					//处理读取的结果
					let wordArray = CryptoJS.lib.WordArray.create(reader.result);
					md5.update(wordArray);
					cuLoaded += e.loaded;
					//如果没有读完，继续
					if (cuLoaded < total) {
						readBlob(cuLoaded);
					} else {
						cuLoaded = total;
						hash = md5.finalize().toString();
						document.getElementById("result").innerText=hash;
					}
					time++;
				}
				//开始读取
				readBlob(0);
				//指定开始位置，分块读取文件
				function readBlob(start) {
					//指定开始位置和结束位置读取文件
					let blob = file.slice(start, start + step);
					reader.readAsArrayBuffer(blob);
				}
			}
			
		</script>
	
</body>
</html>