JS计算本地文件MD5码

最新推荐文章于 2024-04-22 11:00:00 发布

周末未至

最新推荐文章于 2024-04-22 11:00:00 发布

阅读量4.8k

点赞数 1

分类专栏： # Web前端文章标签： js获取文件MD5 页面获取文件MD5 spark-md5

本文链接：https://blog.csdn.net/zorro_jin/article/details/85113156

版权

Web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、背景

由于项目中文件非常重要，为避免文件在网络传输以及读写过程字节丢失造成文件损坏的状况，需要在文件上传完毕之后对服务端保存的文件与客户本地文件进行核对，确保文件准确无误，由此想到了用文件的MD5值进行对比。

在java中获取文件的MD5值比较容易，但是在浏览器上获取文件MD5，并且需要兼容IE10+，就没那么简单了。

本实例是根据spark-md5而来的，有关于spark-md5的详细内容可直接前往查看、下载spark-md5 ，点击"源码"便可下载完整包，我们这里只需要使用spark-md5.js文件。若不想下载整包，在本文最后我将附上本实例的测试源代码可以点击下载。

二、Java后台获取文件MD5码

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

三、 JS获取本地文件MD5码

<!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>

测试源代码包：链接: https://pan.baidu.com/s/1Ib-YSlMGgHgiSpG9xrpTJA 提取码: k5sx

周末未至

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
JS计算本地文件MD5码

一、背景由于项目中文件非常重要，为避免文件在网络传输以及读写过程字节丢失造成文件损坏的状况，需要在文件上传完毕之后对服务端保存的文件与客户本地文件进行核对，确保文件准确无误，由此想到了用文件的MD5值进行对比。在java中获取文件的MD5值比较容易，但是在浏览器上获取文件MD5，并且需要兼容IE10+，就没那么简单了。本实例是根据spark-md5而来的，有关于...
复制链接

扫一扫