我正在使用JavaScript为唯一的文件值生成File HASH VALUE。请检查以下代码以了解哈希生成机制，该机制效果很好。
<script type="text/javascript">
// Reference: https://code.google.com/p/crypto-js/#MD5
function handleFileSelect(evt)
{
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++)
{
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile)
{
return function(e)
{
var span = document.createElement('span');
var test = e.target.result;
//var hash = hex_md5(test);
var hash = CryptoJS.MD5(test);
var elem = document.getElementById("hashValue");
elem.value = hash;
};
})(f);
// Read in the image file as a data URL.
reader.readAsBinaryString(f);
}
}
document.getElementById('videoupload').addEventListener('change', handleFileSelect, false);
</script>
但是，我在为大文件生成哈希值时遇到问题，因为在客户端浏览器崩溃了。
高达 30MB 的哈希运行良好，但如果我尝试上传大于此大小的上传，系统就会崩溃。
我的问题是：
我可以为文件的一部分生成哈希值而不是读取大文件并崩溃吗？如果是，我可以知道如何做这个宽度吗 "文件读取器";
我可以指定任意数量的字节（例如文件的 2000 个字符）以生成 HASH 值，然后为大文件生成。
我希望上述两个解决方案适用于较大和较小的文件。还有其他选择吗？
我的小提琴演示
- 我可以为文件的一部分生成哈希值而不是读取大文件并崩溃吗？如果是，我可以知道如何做那个宽度的"文件阅读器"吗？
是的，你可以这样做，它被称为渐进式哈希。
var md5 = CryptoJS.algo.MD5.create();
md5.update("file part 1");
md5.update("file part 2");
md5.update("file part 3");
var hash = md5.finalize();
- 我可以指定任意数量的字节（例如文件的 2000 个字符）以生成 HASH 值，然后为大文件生成。
有一篇HTML5Rocks文章是关于如何使用File.slice将切片文件传递给FileReader：
var blob = file.slice(startingByte, endindByte);
reader.readAsArrayBuffer(blob);
完整解决方案
我把两者结合起来了。棘手的部分是同步文件读取，因为FileReader.readAsArrayBuffer()是异步的。我写了一个小的series函数，它是在async.js的series函数之后建模的。它必须一个接一个地完成，因为没有办法到达 CryptoJS 的哈希函数的内部状态。
此外，CryptoJS不了解ArrayBuffer是什么，因此必须将其转换为其本机数据表示形式，即所谓的WordArray：
function arrayBufferToWordArray(ab) {
var i8a = new Uint8Array(ab);
var a = [];
for (var i = 0; i < i8a.length; i += 4) {
a.push(i8a[i] << 24 | i8a[i + 1] << 16 | i8a[i + 2] << 8 | i8a[i + 3]);
}
return CryptoJS.lib.WordArray.create(a, i8a.length);
}
另一件事是哈希是一种同步操作，没有yield在其他地方继续执行。因此，浏览器将冻结，因为JavaScript是单线程的。解决方案是使用 Web Worker 将哈希卸载到其他线程，以便 UI 线程保持响应。
Web 工作者期望脚本文件在其构造函数中，因此我使用 Rob W 的这个解决方案来拥有一个内联脚本。
function series(tasks, done){
if(!tasks || tasks.length === 0) {
done();
} else {
tasks[0](function(){
series(tasks.slice(1), done);
});
}
}
function webWorkerOnMessage(e){
if (e.data.type === "create") {
md5 = CryptoJS.algo.MD5.create();
postMessage({type: "create"});
} else if (e.data.type === "update") {
function arrayBufferToWordArray(ab) {
var i8a = new Uint8Array(ab);
var a = [];
for (var i = 0; i < i8a.length; i += 4) {
a.push(i8a[i] << 24 | i8a[i + 1] << 16 | i8a[i + 2] << 8 | i8a[i + 3]);
}
return CryptoJS.lib.WordArray.create(a, i8a.length);
}
md5.update(arrayBufferToWordArray(e.data.chunk));
postMessage({type: "update"});
} else if (e.data.type === "finish") {
postMessage({type: "finish", hash: ""+md5.finalize()});
}
}
// URL.createObjectURL
window.URL = window.URL || window.webkitURL;
// "Server response", used in all examples
var response =
"importScripts('https://cdn.rawgit.com/CryptoStore/crypto-js/3.1.2/build/rollups/md5.js');"+
"var md5;"+
"self.onmessage = "+webWorkerOnMessage.toString();
var blob;
try {
blob = new Blob([response], {type: 'application/javascript'});
} catch (e) { // Backwards-compatibility
window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
blob = new BlobBuilder();
blob.append(response);
blob = blob.getBlob();
}
var worker = new Worker(URL.createObjectURL(blob));
var files = evt.target.files; // FileList object
var chunksize = 1000000; // the chunk size doesn't make a difference
var i = 0,
f = files[i],
chunks = Math.ceil(f.size / chunksize),
chunkTasks = [],
startTime = (new Date()).getTime();
worker.onmessage = function(e) {
// create callback
for(var j = 0; j < chunks; j++){
(function(j, f){
chunkTasks.push(function(next){
var blob = f.slice(j * chunksize, Math.min((j+1) * chunksize, f.size));
var reader = new FileReader();
reader.onload = function(e) {
var chunk = e.target.result;
worker.onmessage = function(e) {
// update callback
document.getElementById('num').innerHTML = ""+(j+1)+"/"+chunks;
next();
};
worker.postMessage({type: "update", chunk: chunk});
};
reader.readAsArrayBuffer(blob);
});
})(j, f);
}
series(chunkTasks, function(){
var elem = document.getElementById("hashValueSplit");
var telem = document.getElementById("time");
worker.onmessage = function(e) {
// finish callback
elem.value = e.data.hash;
telem.innerHTML = "in " + Math.ceil(((new Date()).getTime() - startTime) / 1000) + " seconds";
};
worker.postMessage({type: "finish"});
});
// blocking way ahead...
if (document.getElementById("singleHash").checked) {
var reader = new FileReader();
// Closure to capture the file information.
reader.onloadend = (function(theFile) {
function arrayBufferToWordArray(ab) {
var i8a = new Uint8Array(ab);
var a = [];
for (var i = 0; i < i8a.length; i += 4) {
a.push(i8a[i] << 24 | i8a[i + 1] << 16 | i8a[i + 2] << 8 | i8a[i + 3]);
}
return CryptoJS.lib.WordArray.create(a, i8a.length);
}
return function(e) {
var test = e.target.result;
var hash = CryptoJS.MD5(arrayBufferToWordArray(test));
//var hash = "none";
var elem = document.getElementById("hashValue");
elem.value = hash;
};
})(f);
// Read in the image file as a data URL.
reader.readAsArrayBuffer(f);
}
};
worker.postMessage({type: "create"});
DEMO似乎适用于大文件，但需要相当多的时间。也许这可以通过更快的MD5实现来改进。散列一个 3 GB 的文件大约需要 23 分钟。
我的这个答案显示了 SHA-256 没有网络工作者的示例。