js html5 获取文件md5,How to calculate md5 hash of a file using javascript

The following snippet shows an example, which can archive a throughput of 400 MB/s while reading and hashing the file.

It is using a library called hash-wasm, which is based on WebAssembly and calculates the hash faster than js-only libraries. As of 2020, all modern browsers support WebAssembly.

const chunkSize = 64 * 1024 * 1024;

const fileReader = new FileReader();

let hasher = null;

function hashChunk(chunk) {

return new Promise((resolve, reject) => {

fileReader.onload = async(e) => {

const view = new Uint8Array(e.target.result);

hasher.update(view);

resolve();

};

fileReader.readAsArrayBuffer(chunk);

});

}

const readFile = async(file) => {

if (hasher) {

hasher.init();

} else {

hasher = await hashwasm.createMD5();

}

const chunkNumber = Math.floor(file.size / chunkSize);

for (let i = 0; i <= chunkNumber; i++) {

const chunk = file.slice(

chunkSize * i,

Math.min(chunkSize * (i + 1), file.size)

);

await hashChunk(chunk);

}

const hash = hasher.digest();

return Promise.resolve(hash);

};

const fileSelector = document.getElementById("file-input");

const resultElement = document.getElementById("result");

fileSelector.addEventListener("change", async(event) => {

const file = event.target.files[0];

resultElement.innerHTML = "Loading...";

const start = Date.now();

const hash = await readFile(file);

const end = Date.now();

const duration = end - start;

const fileSizeMB = file.size / 1024 / 1024;

const throughput = fileSizeMB / (duration / 1000);

resultElement.innerHTML = `

Hash: ${hash}

Duration: ${duration} ms

Throughput: ${throughput.toFixed(2)} MB/s

`;

});