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

源代码如下,将源代码保存到本地,调整引入的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>

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
引用[1]中提到了使用crypto-js库进行加密的方法。具体来说,可以使用AES加密算法对数据进行加密。在加密过程中,需要提供一个AES密钥(AESKey)和待加密的数据(value)。加密的过程包括以下几个步骤: 1. 将AES密钥转换为UTF-8编码的格式。 2. 根据AES密钥的前16位生成一个偏移量(iv)。 3. 将待加密的数据转换为UTF-8编码的格式。 4. 使用AES算法和指定的加密模式(ECB)、填充方式(Pkcs7)对数据进行加密。 5. 将加密后的数据转换为Base64字符串并返回。 具体的加密方法如下: ```javascript const encryption = (value: string, AESKey: string) => { let key = CryptoJS.enc.Utf8.parse(AESKey); let iv = CryptoJS.enc.Utf8.parse(AESKey.substr(0, 16)); let srcs = CryptoJS.enc.Utf8.parse(value); let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7, }); return CryptoJS.enc.Base64.stringify(encrypted.ciphertext); } ``` 引用[2]中提到了使用crypto-js库进行解密的方法。解密的过程与加密相反,需要提供AES密钥(AESKey)和待解密的数据(value)。解密的过程包括以下几个步骤: 1. 将AES密钥转换为UTF-8编码的格式。 2. 根据AES密钥的前16位生成一个偏移量(iv)。 3. 使用AES算法和指定的解密模式(ECB)、填充方式(Pkcs7)对数据进行解密。 4. 将解密后的数据转换为UTF-8编码的格式并返回。 具体的解密方法如下: ```javascript const decryption = (value: string, AESKey: string) => { const key = CryptoJS.enc.Utf8.parse(AESKey); let iv = CryptoJS.enc.Utf8.parse(AESKey.substr(0, 16)); const decrypt = CryptoJS.AES.decrypt(value, key, { iv: iv, mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }); return CryptoJS.enc.Utf8.stringify(decrypt).toString(); } ``` 引用[3]中提到了crypto-js库的简介。crypto-js是一个纯JavaScript的加密算法类库,可以方便地在前端进行各种加解密操作。它支持的算法包括MD5、SHA-1、SHA-256、AES、RSA、Rabbit、MARC4、HMAC、HMAC-MD5、HMAC-SHA1、HMAC-SHA256、PBKDF2等。使用时可以引入整个crypto-js库,也可以单独引入需要使用的算法文件。 你可以通过以下方式下载和使用crypto-js库: 1. 下载地址:https://github.com/brix/crypto-js/releases 2. 引入crypto-js.js文件: ```html <script src="crypto-js.js"></script> ``` 综上所述,你可以使用crypto-js库进行文件加密操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值