JSは、ローカルファイルMD5コードを計算します

I.背景

プロジェクトファイルは、ファイル転送やファイルの破損状況によって引き起こされるネットワークバイトの読み取りと書き込み処理の損失を避けるために、あなたはファイルの後に、クライアントのローカルファイルをファイルサーバチェックを保存する必要があり、非常に重要なので、アップロードされ、確認ファイルが正確であることを確認、そしてそれは、ファイルのMD5値と比較するために私をもたらします。

JavaのGETファイルのMD5値では比較的簡単ですが、ブラウザ上でMD5ファイルを取得し、IE10 +、そう単純ではないとの互換性が必要です。

この例では、できスパーク-MD5の詳細があります来る火花-MD5に基づいて直接ビューへのアクセスは、ダウンロードのスパーク-MD5は、「ソース」あなたは完全なパッケージをダウンロードすることができますをクリックしますが、我々は唯一の使用火花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>

テストのソースコードのパッケージ：（ダウンロードテストに）JSファイルローカル・コンピューティングMD5コード

週末の到着前に

公開された47元の記事・ウォン称賛16 ・ビュー70000 +

プライベートの手紙の懸念