md5-util
Version:
拓展spark-md5，支持计算网络文件md5的小插件
113 lines (107 loc) • 3.35 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0" />
<title>demo</title>
<!-- 测试代码 -->
<link href="https://weijhfly.github.io/css/bootstrap.min.css" rel="stylesheet">
<script src="https://weijhfly.github.io/js/layer/layer.js"></script>
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
</script>
<!-- 测试代码 -->
</head>
<body>
<div class="container">
<h3>md5-util 拓展spark-md5，支持计算网络文件md5的小插件</h3>
<div style="height: 5px;"></div>
<hr>
<h4><strong>计算本地文件md5</strong></h4>
<pre>
SparkMD5.file(file,function(md5){
//如果文件读取失败，md5为null
console.log(md5)
})
</pre>
<br>
<input type="file" id="file">
<br>
<div>返回结果：<span id="md51"></span></div>
<br>
<hr>
<h4><strong>计算网络文件md5</strong></h4>
<pre>
/*
使用了XMLHttpRequest responseType = 'blob'，在部分浏览器存在兼容性问题，
已知ios uc浏览器及安卓5.1.1系统浏览器中返回blob不正确，导致md5计算错误，
如果要计算网络文件请慎用，或者计算已知md5的网络文件，对比md5是否准确，考量使用。
*/
SparkMD5.file(url,function(md5){
//网络请求失败、文件读取失败等，md5为null
console.log(md5)
})
//提前验证md5
var rightMd5 = '2b07d9a0a5f3918d876f5acfb8416401';
SparkMD5.file('https://weijhfly.github.io/favicon.ico',function(md5){
if(md5 && md5 !== rightMd5){
console.log('md5计算错误，请停止使用');
}
})
</pre>
<br>
<input type="text" id="file2" style="width: 60%;" placeholder="输入文件url"value="https://weijhfly.github.io/favicon.ico"> <button type="button" class="btn btn-sm btn-warning">确定</button>
<br>
<br>
<div>返回结果：<span id="md52"></span></div>
<br>
<hr>
<h4><strong>SparkMD5官方示例</strong></h4>
<pre>
SparkMD5.hash('hello world')
//"5eb63bbbe01eeed093cb22bb8f5acdc3"
</pre>
更多官方示例查看<a href="https://github.com/satazor/js-spark-md5">SparkMD5</a>
<br>
<br>
<br>
</div>
<script src="md5-util.min.js"></script>
<script>
//本地文件
document.querySelector('#file').addEventListener('change', function () {
SparkMD5.file(this.files[0],function(md5){
document.getElementById('md51').innerHTML = md5;
})
});
//网络文件
var canMD5 = true;
SparkMD5.file('https://weijhfly.github.io/favicon.ico',function(md5){
if(md5 && md5 !== '2b07d9a0a5f3918d876f5acfb8416401'){
canMD5 = false;
layer.msg('md5计算错误');
}
})
document.querySelector('.btn').addEventListener('click', function () {
if(!canMD5){
layer.msg('md5计算错误，请停止使用');
return false;
}
var value = document.querySelector('#file2').value;
if(value){
SparkMD5.file(value,function(md5){
if(!md5){
layer.msg('计算失败');
return false;
}
document.getElementById('md52').innerHTML = md5;
})
}
});
setTimeout(function() {
document.querySelector('.btn').click();
}, 1000);
</script>
</body>
</html>