效果图
实现步骤（最简单方法 - CDN）
<!DOCTYPE html>
<html>
<head>
<title>speak-MD5</title>
</head>
<body>
<input type="file" name="" id='file'>
<script type="text/javascript" src="//lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/spark-md5/3.0.0/spark-md5.min.js"></script>
<script type="text/javascript">
$('#file').change(function() {
let data = this.files[0];
console.log(data)
calculate(data, function(md5) {
console.log(md5) //hash值
alert(md5)
})
})
function calculate(file, callBack) {
let fileReader = new FileReader(),
blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice,
chunkSize = 2097152,
// read in chunks of 2MB
chunks = Math.ceil(file.size / chunkSize),
currentChunk = 0,
spark = new SparkMD5();
fileReader.onload = function(e) {
spark.appendBinary(e.target.result); // append binary string
currentChunk++;
if (currentChunk < chunks) {
loadNext();
} else {
callBack(spark.end());
}
};
function loadNext() {
let start = currentChunk * chunkSize,
end = start + chunkSize >= file.size ? file.size : start + chunkSize;
fileReader.readAsBinaryString(blobSlice.call(file, start, end));
};
loadNext();
}
</script>
</body>
</html>PHP md5_file() 函数
https://www.w3school.com.cn/php/func_string_md5_file.asp
更多
<!-- 连不上 -->
<!-- <script src="//cdn.rawgit.com/satazor/SparkMD5/master/spark-md5.min.js"></script> -->
<!-- npm安装+JS普通引入 -->
<!-- npm install --save spark-md5 -->
<!-- <script src="./node_modules/spark-md5/spark-md5.min.js"></script> -->
<!-- npm安装+require引入 -->
<!-- npm install --save spark-md5 -->
<!-- let SparkMD5 = require('spark-md5') -->