您的位置：首页 > Web前端 > HTML5

HTML5 file api读取文件的MD5码工具

2015-12-04 11:32 881 查看

1、工具的用途：用HTML5 file api读取文件的MD5码。MD5码在文件的唯一性识别上有很重要的应用，业内常用MD5进行文件识别、文件秒传、文件安全性检查等；

2、适用性：IE、Chrome皆兼容；

3、缺陷：当上传大文件时，需要较长的时间才能扫描出MD5码；

4、关于引用：其中引用了js文件（spark-md5.js）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>HTML5 read files hash</title>
<meta name="author" content="Mofei">
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<script src="spark-md5.js" type="text/javascript"></script>
</head>

<body>
<div>
<header>
<h1>HTML5 read files hash</h1>
</header>
<div>
<input type="file" id="file">
<div id="box"></div>
</div>
<footer>
<p>© Copyright  by Percy(<a href="http://www.cnblogs.com/Percy_Lee/">www.cnblogs.com/Percy_Lee</a>)</p>
</footer>
</div>

<script type="text/javascript">
document.getElementById("file").addEventListener("change", function () {
var fileReader = new FileReader(),
box = document.getElementById('box'),
blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice,
file = document.getElementById("file").files[0],
chunkSize = 2097152,
chunks = Math.ceil(file.size / chunkSize),
currentChunk = 0,
bs = fileReader.readAsBinaryString,
spark = bs ? new SparkMD5() : new SparkMD5.ArrayBuffer();

fileReader.onload = function (ee) {
spark.append(ee.target.result);
currentChunk++;

if (currentChunk < chunks) {
loadNext();
} else {
box.innerText = 'MD5:  ' + spark.end();
}
}

function loadNext() {
var start = currentChunk * chunkSize, end = start + chunkSize >= file.size ? file.size : start + chunkSize;
if (bs) fileReader.readAsBinaryString(blobSlice.call(file, start, end));
else fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}

loadNext();
});

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航