使用javascript计算大文件的MD5哈希 [英] Calculate MD5 hash of a large file using javascript

问题描述

如何使用CryptoJS上传500mb文件并获取MD5哈希？

这是我的代码：

  $（'＃upload-file'）。change（function（）{
 var reader = new FileReader（）; 
 reader.addEventListener（'load '，function（）{
 var hash = CryptoJS.MD5（CryptoJS.enc.Latin1.parse（this.result））; 
 window.md5 = hash.toString（CryptoJS.enc.Hex）; 
}）; 
 
 reader.readAsBinaryString（this.files [0]）; 
}）; 
  

如果文件小于200mb，则可以使用。

我尝试过：

大文件上的filereader api

< a href = https://stackoverflow.com/questions/14438187/javascript-filereader-parsing-long-file-in-chunks> javascript FileReader-分块解析长文件

几乎可以正常工作，但是控制台抱怨.join（）

http://dojo4.com/blog/processing-huge-files-with-an-html5 -file-input

解决方案

CryptoJS具有用于哈希摘要的渐进api 。其余部分取自 alediaferia的答案，并作了一些修改。

  function process（）{getMD5（document.getElementById（ my-file-input）。files [0]，prog =>控制台.log（ Progress： + prog））.then（res => console.log（res），err => console.error（err））;} function readChunked（file，chunkCallback，endCallback）{var fileSize = file.size; var chunkSize = 4 * 1024 * 1024; // 4MB var offset = 0; var reader = new FileReader（）; reader.onload = function（）{如果（reader.error）{endCallback（reader.error || {}）;返回;偏移量== reader.result.length; //处理读取块的回调// TODO：处理错误chunkCallback（reader.result，offset，fileSize）; if（offset> = fileSize）{endCallback（null）;返回; } readNext（）; }; reader.onerror = function（err）{endCallback（err || {}）; };函数readNext（）{var fileSlice = file.slice（offset，offset + chunkSize）; reader.readAsBinaryString（fileSlice）; } readNext（）;}函数getMD5（blob，cbProgress）{返回新的Promise（（resolve，reject）=> {var md5 = CryptoJS.algo.MD5.create（）; readChunked（blob，（块，offs，total ）=> {md5.update（CryptoJS.enc.Latin1.parse（chunk））; if（cbProgress）{cbProgress（offs / total）;}}，err => {if（err）{reject（err） ;} else {// TODO：处理错误var hash = md5.finalize（）; var hashHex = hash.toString（CryptoJS.enc.Hex）; resolve（hashHex）;}}）;}）;}  

 < script src = https://cdnjs.cloudflare.com/ ajax / libs / crypto-js / 3.1.2 / components / core.js< // script>< script src = https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1 .2 / components / md5.js>< / script><输入id = my-file-input type = file>< button onclick = process（）> Process< /按钮>  

How do you upload a 500mb file and get a MD5 hash with CryptoJS?

Here is my code:

$('#upload-file').change(function(){
    var reader = new FileReader();
    reader.addEventListener('load',function () {
        var hash = CryptoJS.MD5(CryptoJS.enc.Latin1.parse(this.result));
        window.md5 = hash.toString(CryptoJS.enc.Hex);
    });

    reader.readAsBinaryString(this.files[0]);
});

If the file is under 200mb, it works. Anything bigger, this.result is an empty "".

I've tried:

filereader api on big files

javascript FileReader - parsing long file in chunks

and almost got this to work , but console is complaining about .join("")

http://dojo4.com/blog/processing-huge-files-with-an-html5-file-input

解决方案

CryptoJS has a progressive api for hash digests. The rest is taken form alediaferia's answer with slight modifications.

function process() {
  getMD5(
    document.getElementById("my-file-input").files[0],
    prog => console.log("Progress: " + prog)
  ).then(
    res => console.log(res),
    err => console.error(err)
  );
}

function readChunked(file, chunkCallback, endCallback) {
  var fileSize   = file.size;
  var chunkSize  = 4 * 1024 * 1024; // 4MB
  var offset     = 0;
  
  var reader = new FileReader();
  reader.onload = function() {
    if (reader.error) {
      endCallback(reader.error || {});
      return;
    }
    offset += reader.result.length;
    // callback for handling read chunk
    // TODO: handle errors
    chunkCallback(reader.result, offset, fileSize); 
    if (offset >= fileSize) {
      endCallback(null);
      return;
    }
    readNext();
  };

  reader.onerror = function(err) {
    endCallback(err || {});
  };

  function readNext() {
    var fileSlice = file.slice(offset, offset + chunkSize);
    reader.readAsBinaryString(fileSlice);
  }
  readNext();
}

function getMD5(blob, cbProgress) {
  return new Promise((resolve, reject) => {
    var md5 = CryptoJS.algo.MD5.create();
    readChunked(blob, (chunk, offs, total) => {
      md5.update(CryptoJS.enc.Latin1.parse(chunk));
      if (cbProgress) {
        cbProgress(offs / total);
      }
    }, err => {
      if (err) {
        reject(err);
      } else {
        // TODO: Handle errors
        var hash = md5.finalize();
        var hashHex = hash.toString(CryptoJS.enc.Hex);
        resolve(hashHex);
      }
    });
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/core.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/md5.js"></script>
<input id="my-file-input" type="file">
<button onclick="process()">Process</button>

这篇关于使用javascript计算大文件的MD5哈希的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！