js使用FileReader和Google的md5.js计算文件的MD5值

最新推荐文章于 2025-07-18 09:17:33 发布

原创最新推荐文章于 2025-07-18 09:17:33 发布 · 6.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #md5 #文件 #md5.js #FileReader

js 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何结合JavaScript的FileReader接口和Google的md5.js库，来计算上传文件的MD5校验值，这对于文件验证和重复检测非常有用。

js使用FileReader和Google的md5.js计算文件的MD5值

<body>
	<input id="input_md5" type="file" multiple="multiple"></input>
	
	<div class="progress progress-striped active progress-success">
          <div id="div_load" style="width: 40%" class="bar"></div>
    </div>
    
    <div id="md5_show"></div>
</body>

<script type="text/javascript">

	var message = [];
	
	if(!document.getElementById("input_md5").files){
		message = '<p>浏览器不支持FileReader API</p>';  
		document.querySelector("body").innerHTML = message;
	}else{
		document.getElementById('input_md5').addEventListener('change', handleFileSelection, false);
	}
	
	function handleFileSelection(event) {
		var files = event.target.files;
		if(!files){
			  msa.alert("<p>At least one selected file is invalid - do not select any folders.</p><p>Please reselect and try again.</p>");  
			  return;
		}
		
		var file = files[0];
		
		var chunkSize = 204800;
		var pos = 0;
		
		var md5Instance = CryptoJS.algo.MD5.create();
		
		var reader = new FileReader();
		function progressiveReadNext(){
			var end = Math.min(pos + chunkSize, file.size);

			reader.onload = function(e) {
				pos = end;
				md5Instance.update(CryptoJS.enc.Latin1.parse(e.target.result));
				var present = (parseFloat(pos)/parseFloat(file.size))*10000/100;
				$("#div_load").css("width",Math.round(present) +"%");
				if (pos < file.size) {
					progressiveReadNext();
				} else {
					var md5Value = md5Instance.finalize();
					console.log(md5Value.toString());
					$("#md5_show").html(md5Value.toString());
					
				}
			}

			if (file.slice) {
				var blob = file.slice(pos, end);
			} else if (file.webkitSlice) {
				var blob = file.webkitSlice(pos, end);
			}else if(File.prototype.mozSlice){
				var blob = file.mozSlice(pos, end);
			}
			reader.readAsBinaryString(blob);
		}
		progressiveReadNext();
	}
</script>

笔记

备忘录

代码块