前端經過spark-md5.js計算本地文件md5

時間 2019-11-16

標籤前端經過 spark md5.js 計算本地文件 md5 欄目 Spark 简体版

原文原文鏈接

背景：

說到本人第一次使用spark-md5.js仍是差很少一年之前的時候了，當時後臺老大說要搞一個文件分片上傳的功能。我當時就心想：what？啥是文件分片上傳，徹底沒聽過好嗎？

至於我當時心裏那個慌就很少描述了，總之文件分片上傳須要一個識別文件的惟一標識，而md5是很是合適的。spark-md5.js就是前端在文件上傳前在本地計算md5的很可靠的方案

spark-md5.js是外國人寫的，若是英文底子好且想了解更多信息能夠到npm網站了解： www.npmjs.com/package/spa…

使用：

首先要作的固然是在html文件中引入spark-md5.js咯，根據本身的需求能夠引入壓縮版或者開發版

在此以前必須說明，這裏用到了html5提供的FileReader接口，目前實現了這個接口的瀏覽器有FireFox3.6+ 、chrome6+、IE10+，所以若是須要更多的兼容的話、抱歉，我目前也沒有找到好的方法

關於FileReader,這裏有一篇高質量的博文能夠了解一下： blog.csdn.net/jackfrued/a…

這裏提供了兩個方法；一種是用SparkMD5.hashBinary( ) 直接將整個文件的二進制碼傳入直接返回文件的md五、這種方法對於小文件會比較有優點——簡單而且速度快。

另外一種方法是利用js中File對象的slice( )方法（File.prototype.slice( )）將文件分片後逐個傳入spark.appendBinary( )方法來計算、最後經過spark.end( )方法輸出結果，很明顯，這種方法對於大型文件會很是有利——不容易出錯，而且可以提供計算的進度信息

咱們開始吧，接下來上代碼：

首先第一種方法：

var running = false;    //running用於判斷是否正在計算md5
            function doNormalTest( input ) {    //這裏假設直接將文件選擇框的dom引用傳入
                
                if (running) {    // 若是正在計算、不容許開始下一次計算
                    return;
                }
 
                var fileReader = new FileReader(),    //建立FileReader實例
                    time;
 
                fileReader.onload = function (e) {    //FileReader的load事件，當文件讀取完畢時觸發
                    running = false;
 
                    // e.target指向上面的fileReader實例
                    if (file.size != e.target.result.length) {    //若是二者不一致說明讀取出錯
                       alert("ERROR:Browser reported success but could not read the file until the end.");
                    } else {
                        console.log(Finished loading!success!!);
                         return SparkMD5.hashBinary(e.target.result);    //計算md5並返回結果
                         
                    }
                };
 
                fileReader.onerror = function () {    //若是讀取文件出錯，取消讀取狀態並彈框報錯
                    running = false;
                    alert("ERROR:FileReader onerror was triggered, maybe the browser aborted due to high memory usage.");
                };
 
                running = true;
                fileReader.readAsBinaryString( input.files[0] );    //經過fileReader讀取文件二進制碼
            };

複製代碼

接下上第二種方法：
html

function doIncrementalTest( input ) {    //這裏假設直接將文件選擇框的dom引用傳入
                if (running) {
                    return;
                }
 
                //這裏須要用到File的slice( )方法，如下是兼容寫法
                var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
                    file = input.files[0],
                    chunkSize = 2097152,                           // 以每片2MB大小來逐次讀取
                    chunks = Math.ceil(file.size / chunkSize),
                    currentChunk = 0,
                    spark = new SparkMD5(),    //建立SparkMD5的實例
                    time,
                    fileReader = new FileReader();
 
                fileReader.onload = function (e) {
 
                    console("Read chunk number (currentChunk + 1) of chunks ");
 
                    spark.appendBinary(e.target.result);                 // append array buffer
                    currentChunk += 1;
 
                    if (currentChunk < chunks) {
                        loadNext();
                    } else {
                        running = false;
                        console.log("Finished loading!");
                        return spark.end();     // 完成計算，返回結果
                    }
                };
 
                fileReader.onerror = function () {
                    running = false;
                    console.log("something went wrong");
                };
 
                function loadNext() {
                    var start = currentChunk * chunkSize,
                        end = start + chunkSize >= file.size ? file.size : start + chunkSize;
 
                    fileReader.readAsBinaryString(blobSlice.call(file, start, end));
                }
 
                running = true;
                loadNext();
            } 
複製代碼