在项目中遇到了上传文件,同时要附带此文件的md5,其实文件的md5就是文件二进制md5,用spark-md5.js+FileReader就能实现:
首先要做的当然是在html文件中引入spark-md5.js咯,根据自己的需求可以引入压缩版或者开发版
在此之前必须说明,这里用到了html5提供的
FileReader接口,目前实现了这个接口的浏览器有FireFox3.6+ 、chrome6+、IE10+,因此如果需要更多的兼容的话、抱歉,我目前也没有找到好的方法
这里提供了两个方法;一种是用SparkMD5.hashBinary() 直接将整个文件的二进制码传入直接返回文件的md5、这种方法对于小文件会比较有优势——简单并且速度快。
另一种方法是利用js中File对象的slice()方法(File.prototype.slice())将文件分片后逐个传入spark.appendBinary()方法来计算、最后通过spark.end()方法输出结果,很明显,这种方法对于大型文件会非常有利——不容易出错,并且能够提供计算的进度信息
我们开始吧,接下来上代码:
首先第一种方法:
02 | function doNormalTest( input ) { |
08 | var fileReader = new FileReader(), |
11 | fileReader.onload = function (e) { |
15 | if (file.size != e.target.result.length) { |
16 | alert( "ERROR:Browser reported success but could not read the file until the end." ); |
18 | console.log(Finished loading!success!!); |
19 | return SparkMD5.hashBinary(e.target.result); |
24 | fileReader.onerror = function () { |
26 | alert( "ERROR:FileReader onerror was triggered, maybe the browser aborted due to high memory usage." ); |
30 | fileReader.readAsBinaryString( input.files[0] ); |
第二种方法:
01 | function doIncrementalTest( input ) { |
07 | var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice, |
08 | file = input.files[0], |
10 | chunks = Math.ceil(file.size / chunkSize), |
12 | spark = new SparkMD5(), |
14 | fileReader = new FileReader(); |
16 | fileReader.onload = function (e) { |
18 | console( "Read chunk number (currentChunk + 1) of chunks " ); |
20 | spark.appendBinary(e.target.result); |
23 | if (currentChunk < chunks) { |
27 | console.log( "Finished loading!" ); |
32 | fileReader.onerror = function () { |
34 | console.log( "something went wrong" ); |
38 | var start = currentChunk * chunkSize, |
39 | end = start + chunkSize >= file.size ? file.size : start + chunkSize; |
41 | fileReader.readAsBinaryString(blobSlice.call(file, start, end)); |
接下来你只要在input的onchange事件处理程序中调用doNormalTest或doIncrementalTest方法,并将input元素的dom节点传入就可以了