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