背景：

說到本人第一次使用spark-md5.js還是差不多一年以前的時候了，當時后臺老大說要搞一個文件分片上傳的功能。我當時就心想：what？啥是文件分片上傳，完全沒聽過好嗎？ 至于我當時內心那個慌就不多描述了，總之文件分片上傳需要一個識別文件的唯一標識，而md5是非常合適的。spark-md5.js就是前端在文件上傳前在本地計算md5的很可靠的方案 spark-md5.js是外國人寫的，如果英文底子好且想了解更多信息可以到npm網站了解：https://www.npmjs.com/package/spark-md5

使用：

首先要做的當然是在html文件中引入spark-md5.js咯，根據自己的需求可以引入壓縮版或者開發版

在此之前必須說明，這里用到了html5提供的FileReader接口，目前實現了這個接口的瀏覽器有FireFox3.6 、chrome6 、IE10 ，因此如果需要更多的兼容的話、抱歉，我目前也沒有找到好的方法 關于FileReader,這里有一篇高質量的博文可以了解一下：https://blog.csdn.net/jackfrued/article/details/8967667
這里提供了兩個方法；一種是用SparkMD5.hashBinary( ) 直接將整個文件的二進制碼傳入直接返回文件的md5、這種方法對于小文件會比較有優勢——簡單并且速度快。 另一種方法是利用js中File對象的slice( )方法（File.prototype.slice( )）將文件分片后逐個傳入spark.appendBinary( )方法來計算、最后通過spark.end( )方法輸出結果，很明顯，這種方法對于大型文件會非常有利——不容易出錯，并且能夠提供計算的進度信息

我們開始吧，接下來上代碼： 首先第一種方法：

var running = false; //running用于判斷是否正在計算md5function 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讀取文件二進制碼};

接下上第二種方法：

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 buffercurrentChunk = 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();}

接下來你只要在input的onchange事件處理程序中調用doNormalTest或doIncrementalTest方法，并將input元素的dom節點傳入就可以了
除此之外，作者在他的demo里面也有使用的詳細實例。如果覺得不明白可以直接通過下面的下載方法下載后看demo

下載：

最后，如果你需要這個工具可以通過npm直接安裝， npm i spark-md5
或者到作者的github上直接下載：
https://github.com/satazor/js-spark-md5

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的前端通过spark-md5.js计算本地文件md5的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。