JS calculate local file MD5 code

I. Background

Because the project file is very important, in order to avoid the loss in file transfer and network byte read and write process caused by file corruption situation, you need to save the file server check with the client's local file after the file is uploaded, make sure the file is accurate, And that brings me to compare with the MD5 value of files.

In java get file MD5 value is relatively easy, but get MD5 file on the browser and requires compatible with IE10 +, not so simple.

This example is based on spark-md5 comes, there are details about the spark-md5 can directly access to view, download spark-md5 , click on the "source" you can download the full package, we only need to use spark-md5.js file . If do not want to download the entire package, in the end of this article I will attach this instance the test source code can click to download.

Two, Java obtain background file MD5 code

String endFileMd5 = DigestUtils.md5Hex(new FileInputStream(filePath));

Three, JS file MD5 code to get local

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS计算本地文件MD5值</title>
        <!-- 引入jquery -->
        <script src="jquery.js" type="text/javascript"></script>
        <!-- 引入spark-MD5.js计算文件MD5值 -->
        <script src="spark-md5.js" type="text/javascript"></script>
        <style>
            .content {
                width: 800px;
                padding: 20px 50px;
                margin: 20px auto;
                border: 2px solid #999;
            }
            .showInfo {
                margin-top: 20px;
                padding: 10px;
                line-height: 25px;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div>
                <input type="file" name="file" id="selectedFile" onChange="getFileMd5();"/>
            </div>
            <div class="showInfo">
			
            </div>
        </div>
    </body>
    <script type="text/javascript">
        /** 计算文件的MD5值  */
        function getFileMd5(){
            // 获取文件
            var file = document.getElementById("selectedFile").files[0];
            // 创建文件读取对象，此对象允许Web应用程序异步读取存储在用户计算机上的文件内容
            var fileReader = new FileReader();
            // 根据浏览器获取文件分割方法
            var blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice; 
            // 指定文件分块大小(2M)
            var chunkSize = 2 * 1024 * 1024;
            // 计算文件分块总数
            var chunks = Math.ceil(file.size / chunkSize);
            // 指定当前块指针
            var currentChunk = 0;
		 
            // 创建MD5计算对象
            var spark = new SparkMD5.ArrayBuffer();
			
            // 记录开始时间
            var startTime = new Date().getTime();
			
            // FileReader分片式读取文件
            loadNext();
			
            // 获取输出信息区域
            var showInfo = $(".showInfo");
            showInfo.html('');
			
            // 当读取操作成功完成时调用
            fileReader.onload = function() {
                // 输出加载信息
                showInfo.append('读取文件： <strong>' + (currentChunk + 1) + '</strong> / <strong>' + chunks + ' ...</strong><br/>');
				
                // 将文件内容追加至spark中
                spark.append(this.result);
                currentChunk += 1;
		 
                // 判断文件是否都已经读取完
                if (currentChunk < chunks) {
                    loadNext();
                } else {
                    // 计算spack中内容的MD5值,并返回
                    showInfo.append('<br/>MD5值为： <strong><font color="green">' + spark.end() + '</font></strong><br/>');
                    showInfo.append('计算时长 ： <strong><font color="green">' + (new Date().getTime() - startTime) + '</font></strong> 毫秒！<br/>');
                    return spark.end();
                }
            };
		 
            // FileReader分片式读取文件
            function loadNext() {
                // 计算开始读取的位置
                var start = currentChunk * chunkSize;
                // 计算结束读取的位置
                var end = start + chunkSize >= file.size ? file.size : start + chunkSize;
                fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
            }
        }
    </script>
</html>

Test source code package: the JS file local computing MD5 code (to download test)

Before the arrival of the weekend

Published 47 original articles · won praise 16 · views 70000 +

Private letter concerns