有没有办法在使用 Javascript 上传到服务器之前计算文件的 MD5 哈希值？
如何使用javascript计算文件的md5哈希
IT技术
javascript
md5
2021-02-01 07:40:42
6个回答
虽然有MD5 算法的JS 实现，但较旧的浏览器通常无法从本地文件系统读取文件。
我是在 2009 年写的。那么新的浏览器呢？
使用支持FileAPI的浏览器，您可以读取文件的内容- 用户必须选择它，无论是使用<input>元素还是拖放。截至 2013 年 1 月，以下是主要浏览器的排列方式：
- FF 3.6 支持FileReader，FF4 支持更多基于文件的功能
- Chrome 从 7.0.517.41版本开始支持FileAPI
- Internet Explorer 10 有部分FileAPI 支持
- Opera 11.10部分支持 FileAPI
- Safari - 我找不到一个好的官方来源，但是这个站点建议部分支持 5.1，完全支持 6.0。另一篇文章报告了与旧版 Safari 的一些不一致
如何？
我制作了一个实现增量 md5 的库，以便有效地散列大文件。基本上，您分块读取文件（以保持低内存）并增量散列它。您在自述文件中获得了基本用法和示例。
请注意，您需要 HTML5 FileAPI，所以一定要检查它。test 文件夹中有一个完整的示例。
使用CryptoJS的MD5 函数和HTML5 FileReader API计算 MD5 哈希值非常容易。以下代码片段显示了如何读取二进制数据并从已拖入浏览器的图像中计算 MD5 哈希值：
var holder = document.getElementById('holder');
holder.ondragover = function() {
return false;
};
holder.ondragend = function() {
return false;
};
holder.ondrop = function(event) {
event.preventDefault();
var file = event.dataTransfer.files[0];
var reader = new FileReader();
reader.onload = function(event) {
var binary = event.target.result;
var md5 = CryptoJS.MD5(binary).toString();
console.log(md5);
};
reader.readAsBinaryString(file);
};
我建议添加一些 CSS 以查看拖放区域：
#holder {
border: 10px dashed #ccc;
width: 300px;
height: 300px;
}
#holder.hover {
border: 10px dashed #333;
}
可以在此处找到有关拖放功能的更多信息：File API & FileReader
我在 Google Chrome 版本 32 中测试了示例。
HTML5 +spark-md5和Q
假设您使用现代浏览器（支持 HTML5 文件 API），以下是计算大文件MD5 哈希的方法（它将计算可变块的哈希）
function calculateMD5Hash(file, bufferSize) {
var def = Q.defer();
var fileReader = new FileReader();
var fileSlicer = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
var hashAlgorithm = new SparkMD5();
var totalParts = Math.ceil(file.size / bufferSize);
var currentPart = 0;
var startTime = new Date().getTime();
fileReader.onload = function(e) {
currentPart += 1;
def.notify({
currentPart: currentPart,
totalParts: totalParts
});
var buffer = e.target.result;
hashAlgorithm.appendBinary(buffer);
if (currentPart < totalParts) {
processNextPart();
return;
}
def.resolve({
hashResult: hashAlgorithm.end(),
duration: new Date().getTime() - startTime
});
};
fileReader.onerror = function(e) {
def.reject(e);
};
function processNextPart() {
var start = currentPart * bufferSize;
var end = Math.min(start + bufferSize, file.size);
fileReader.readAsBinaryString(fileSlicer.call(file, start, end));
}
processNextPart();
return def.promise;
}
function calculate() {
var input = document.getElementById('file');
if (!input.files.length) {
return;
}
var file = input.files[0];
var bufferSize = Math.pow(1024, 2) * 10; // 10MB
calculateMD5Hash(file, bufferSize).then(
function(result) {
// Success
console.log(result);
},
function(err) {
// There was an error,
},
function(progress) {
// We get notified of the progress as it is executed
console.log(progress.currentPart, 'of', progress.totalParts, 'Total bytes:', progress.currentPart * bufferSize, 'of', progress.totalParts * bufferSize);
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/q.js/1.4.1/q.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spark-md5/2.0.2/spark-md5.min.js"></script>
<div>
<input type="file" id="file"/>
<input type="button" onclick="calculate();" value="Calculate" class="btn primary" />
</div>以下代码段显示了一个示例，该示例可以在读取和散列文件时以 400 MB/s 的吞吐量存档。
它使用了一个名为hash-wasm的库，它基于 WebAssembly 并且比仅使用 js 的库更快地计算哈希。到 2020 年，所有现代浏览器都支持 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}<br>
Duration: ${duration} ms<br>
Throughput: ${throughput.toFixed(2)} MB/s
`;
});<script src="https://cdn.jsdelivr.net/npm/hash-wasm"></script>
<!-- defines the global `hashwasm` variable -->
<input type="file" id="file-input">
<div id="result"></div>