md5 concept and role:
MD5 is the abbreviation of message-digest algorithm 5 (message-digest algorithm), which is widely used in encryption and decryption technology. It can be said to be the "digital fingerprint" of the file. Any file, whether it is an executable program, an image file, a temporary file or any other type of file, no matter how large it is, has one and only one unique MD5 information value, and if the file has been modified, its MD5 The value will also change accordingly. Therefore, we can check whether the file has been "tampered" by comparing the MD5 value of the same file.
Practical application:
When developing an advertising resource management platform recently, it is necessary to upload advertising resources (pictures and videos) to calculate the md5 value. The reason for calculating the md5 value of advertising resources is that the resources stored in the file server will not be obtained repeatedly, and the device will use a unique md5 value when obtaining advertisements to avoid repeatedly downloading the already obtained advertising resources, but directly use the already downloaded advertising resources. resource of.
Below is the HTML and JS processing of the upload interface.
H5's File Api calculation is used.
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();
});