需求:需要获取上传文件整体的md5值,然后传给后端,所以采用spark.md5.js
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file" id="file" />
<script src="spark.md5.js"></script>
<script>
document.getElementById('file').onchange = function(ev){
let file = this.files[0];
let fileReader = new FileReader();
fileReader.onload = function(ev){
let fileMd5 = SparkMD5.ArrayBuffer.hash(ev.target.result);
console.log(fileMd5);
console.log(file);
}
fileReader.readAsArrayBuffer(file);
}
</script>
</body>
</html>
如果文件过大上述方法效率并不高,于是我们采用对文件分片读取然后分片加入 spark 对象的计算方法中,一片一片读取计算,最后得出文件最终的 md5 值:
document.getElementById('file').addEventListener('change', function () {
var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
file = this.files[0],
//以2MB为一个分片, Read in chunks of 2MB
chunkSize = 2097152,
//计算该文件一共有多少个分片
chunks = Math.ceil(file.size / chunkSize),
//当前分片
currentChunk = 0,
//创建一个spark md5计算arrayBuffer的对象
spark = new SparkMD5.ArrayBuffer(),
//创建fileReader对象
fileReader = new FileReader();
//当前分片读取完成
fileReader.onload = function (e) {
//当前的分片和总分片可以了解当前上传的进度
console.log('read chunk nr', currentChunk + 1, 'of', chunks);
// Append array buffer
spark.append(e.target.result);
//计数累加
currentChunk++;
if (currentChunk < chunks) {
//当前分片的md5 hash值
console.log('current chunck hash:',SparkMD5.ArrayBuffer.hash(e.target.result));
//不是最后一个分片,加载下一个分片
loadNext();
} else {
console.log('finished loading');
// Compute hash
//最后一个分片,结束,spark.end()就是最后文件的MD5hash值
console.info('computed hash:', spark.end());
}
};
//错误
fileReader.onerror = function () {
console.warn('oops, something went wrong.');
};
//读取文件分片
function loadNext() {
//开始位置
var start = currentChunk * chunkSize,
//结束位置
end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
//fileReader读取下一个文件分片
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}
//首次调用开始读取文件分片
loadNext();
});
上述方法还可以用来在大文件分片上传时使用,先计算整个文件的 MD5 值传给后台用于区分多个文件,然后上传每个分片和该分片的 md5 值,这样就可以做到断点续传等功能。
地址: