前端经过spark-md5.js计算本地文件md5

背景：

说到本人第一次使用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读取文件二进制码
            };

复制代码

接下上第二种方法：

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();
            } 
复制代码

接下来你只要在input的onchange事件处理程序中调用doNormalTest或doIncrementalTest方法，并将input元素的dom节点传入就能够了

除此以外，做者在他的demo里面也有使用的详细实例。若是以为不明白能够直接经过下面的下载方法下载后看demo

下载：

最后，若是你须要这个工具能够经过npm直接安装，

npm i spark-md5

或者到做者的github上直接下载：

github.com/satazor/js-…