使用JavaScript计算文件的MD5哈希值

Question

我需要从前端上传文件并计算文件的md5哈希值。我尝试使用crypto.js来生成md5哈希值，但对于图像，它会给出错误的md5哈希值。我看到一个名为onlinemd5.com的网站，正是我所需要的。

请问是否有人能帮助我使用JavaScript计算文件（文本文件、图像、视频等）的md5哈希值？我可以从http://onlinemd5.com下载代码并实现吗？

注：我尝试了如何使用JavaScript计算文件的md5哈希值中的一些建议，但没有用处。

---

$scope.upld = function(element){
    $scope.files = element.files;
    var file = $scope.files[0];
    var reader = new FileReader();
    reader.onload = function(){
        $scope.md5_val = CryptoJS.MD5(reader.result);
        $scope.upload_file();
        $scope.$apply();
    };
    reader.readAsBinaryString(file);
};

crypto.js没有正确计算图像的md5值。不过，我还没有尝试使用sparkmd5 js。

- Mustang

---

请描述您尝试了什么以及为什么它没有起作用。例如：首先我运行了a，但它抛出错误，所以我尝试了b，但结果是c，这让我感到意外，因为我正在寻找类似d的模式。 - Seth Holladay

请详细说明“但无用”的含义。 - sebnukem

很抱歉，我应该在提问时附上代码。请在下方查看。 - Mustang

我尝试使用 http://www.webtoolkit.info/javascript-md5.html 上的 JavaScript，并从图片文件夹中上传了一个名为 koala.jpg 的图像文件。它计算出的 md5 值为 '4f413976a7a4b93d19c06e94fae0899d'，而我从 onlinemd5.com 得到了不同的哈希值。 - Mustang

我尝试使用位于github.com/sagens42/md5asm的js。但是它给我返回了空字符串的md5值。以下是代码：var calcS = new md5(reader.result); $scope.md5Value = calcS.getMd5(); - Mustang

这个回答解决了你的问题吗？如何在JavaScript/Node.js中生成MD5文件哈希？ - undefined

Answer 1

我使用reader.readAsArrayBuffer()让它工作了:

$(inputElement).change(
    function () {
        var reader = new FileReader();
        
        reader.addEventListener(
            'load',
            function () {
                var wordArray = CryptoJS.lib.WordArray.create(this.result);
                console.log(CryptoJS.MD5(wordArray));
            }
        );
        
        reader.readAsArrayBuffer(this.files[0]);
    }
);

我不得不添加一个额外的依赖库CryptoJS: https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js

这里是jsFiddle.

- Phylogenesis

---

当我在 jsFiddle 上尝试时，它会显示“Uncaught TypeError: Failed to construct 'FileReader': Please use the 'new' operator, this DOM object constructor cannot be called as a function.”你对此有什么建议？ - Kubuntuer82

@Kubuntuer82 我已经按要求更新了 jsFiddle 链接，以便继续工作。 - Phylogenesis

Answer 2

我使用了来自https://github.com/satazor/SparkMD5的spark-md5.js库。 它非常棒且速度很快。如果有人想要计算任何上传文件的md5值，这是最好的解决方案。

- Mustang