js 获取文件 MD5

每个文件的md5值都是唯一的,这也是很多下载网站,会告诉你原文件的md5是多少,然后下载完毕让你自行去对比是否一致,以检验文件是否是完整的。校验md5亦可实现所谓的”秒传“功能。

使用到的类库 Spark-MD5

  1. function getMD5(file, callBack) {
  2.   /*
  3.   *     file 选取的文件
  4.   *     callBack 回调函数可以返回获取的MD5
  5.   */
  6.   let fileReader = new FileReader(),
  7.     blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice,
  8.     chunkSize = 2097152,
  9.     // read in chunks of 2MB  
  10.     chunks = Math.ceil(file.size / chunkSize),
  11.     currentChunk = 0,
  12.     spark = new SparkMD5();
  13.   fileReader.onload = function (e) {
  14.     spark.appendBinary(e.target.result); // append binary string  
  15.     currentChunk++;
  16.     if (currentChunk < chunks) {
  17.       loadNext();
  18.     }
  19.     else {
  20.       callBack(spark.end());
  21.     }
  22.   };
  23.   function loadNext() {
  24.     let start = currentChunk * chunkSize,
  25.       end = start + chunkSize >= file.size ? file.size : start + chunkSize;
  26.     fileReader.readAsBinaryString(blobSlice.call(file, start, end));
  27.   };
  28.   loadNext();
  29. };

 

完整例子:

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.   <title>speak-MD5</title>  
  6. </head>  
  7.   
  8. <body>  
  9.   <input type=“file” name=“” id=‘file’>  
  10.   <script type=“text/javascript” src=“js/jquery.js”></script>  
  11.   <script type=“text/javascript” src=“node_modules/spark-md5/spark-md5.js”></script>  
  12.   <script type=“text/javascript”>  
  13.     $(‘#file’).change(function () {  
  14.       let data = this.files[0];  
  15.       console.log(data)  
  16.       calculate(data, function (md5) {  
  17.         console.log(md5)//hash值  
  18.       })  
  19.     })  
  20.   
  21.     function calculate(file, callBack) {  
  22.       let fileReader = new FileReader(),  
  23.         blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice,  
  24.         chunkSize = 2097152,  
  25.         // read in chunks of 2MB    
  26.         chunks = Math.ceil(file.size / chunkSize),  
  27.         currentChunk = 0,  
  28.         spark = new SparkMD5();  
  29.   
  30.       fileReader.onload = function (e) {  
  31.         spark.appendBinary(e.target.result); // append binary string    
  32.         currentChunk++;  
  33.   
  34.         if (currentChunk < chunks) {  
  35.           loadNext();  
  36.         }  
  37.         else {  
  38.           callBack(spark.end());  
  39.         }  
  40.       };  
  41.   
  42.       function loadNext() {  
  43.         let start = currentChunk * chunkSize,  
  44.           end = start + chunkSize >= file.size ? file.size : start + chunkSize;  
  45.   
  46.         fileReader.readAsBinaryString(blobSlice.call(file, start, end));  
  47.       };  
  48.   
  49.       loadNext();  
  50.     }  
  51.   </script>  
  52. </body>  
  53.   
  54. </html>  

本文链接地址: js 获取文件 MD5

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注