如何使用javascript计算文件的md5哈希值

Question

如何使用javascript计算文件的md5哈希值有没有办法在使用Javascript上传到服务器之前计算文件的MD5哈希值？

Answer 1

虽然有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的一些不一致之处

Answer 2

使用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中测试了该示例。