chunks = Math.ceil(file.size / chunkSize)

时间:2022-04-18 05:13:11

md5观点及感化:

MD5是message-digest algorithm 5(信息-摘要算法)的缩写,被广泛用于加密和解密技术上,它可以说是文件的“数字指纹”。任何一个文件,无论是可执行措施、图像文件、姑且文件或者其他任何类型的文件,也不管它体积多大,都有且只有一个并世无双的MD5信息值,,并且如果这个文件被改削过,它的MD5值也将随之转变。因此,我们可以通过比拟同一文件的MD5值,来校验这个文件是否被“篡改”过。

实际应用:

近期在开发告白资源打点平台时,需要上传告白资源(图片以及视频)进行计算md5值。之所以要计算告白资源的md5值,是为了在文件处事器中存放的资源不会反复获取,以及设备获取告白时通过独一的md5值,制止反复下载已经获得的告白资源,而是直接使用已经下载的资源。

下面是上传界面的HTML以及JS措置惩罚惩罚。

用到了H5的File Api 计算。

HTML:

<div class="form-group"> <label for="img" class="col-sm-2 control-label">文件</label> <div class="col-sm-8"> <input class="form-control" type="file" style="height:auto;" id="file" name="file" onchange="imgPreview(this)" /> <img style="max-width:100%;height:auto;margin-top: 10px" id="imgpreview" /> </div> <div id="box"></div> </div> <input type="hidden" id="MD5" name="MD5"/>

JavaScript:

document.getElementById("file").addEventListener("change", function () { var fileReader = new FileReader(), box = document.getElementById(‘box‘), blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice, file = document.getElementById("file").files[0], chunkSize = 2097152, chunks = Math.ceil(file.size / chunkSize), currentChunk = 0, bs = fileReader.readAsBinaryString, spark = bs ? new SparkMD5() : new SparkMD5.ArrayBuffer(); fileReader.onload = function (ee) { spark.append(ee.target.result); currentChunk++; if (currentChunk < chunks) { loadNext(); } else { var md5 = spark.end(); box.innerText = ‘MD5: ‘ + md5; $(‘#MD5‘).val(md5); } } function loadNext() { var start = currentChunk * chunkSize, end = start + chunkSize >= file.size ? file.size : start + chunkSize; if (bs) fileReader.readAsBinaryString(blobSlice.call(file, start, end)); else fileReader.readAsArrayBuffer(blobSlice.call(file, start, end)); } loadNext(); });