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

11 回答

• 0

  虽然有JS implementations的MD5算法， older browsers are generally unable to read files from the local filesystem .

  我在2009年写过 . 那么新的浏览器呢？

  *With a browser that supports the FileAPI, you can * read the contents of a file - 用户必须选择它，使用 <input> 元素或拖放 . 截至2013年1月，这里是主要浏览器的堆叠方式：

  • FF 3.6支持FileReader，FF4支持更多基于文件的功能

  • Chrome自version 7.0.517.41以来一直支持FileAPI

  • Internet Explorer 10有部分FileAPI support

  • Opera 11.10有partial support for FileAPI

  • Safari - 我找不到一个好的官方来源，但this site suggests partial support from 5.1, full support for 6.0 . 另一篇文章报道some inconsistencies with the older Safari versions

  回复于 2024-04-28T17:18:30+08:00
• 25

  我已经创建了一个实现增量md5的库，以便有效地散列大文件 . 基本上你用块读取文件（保持低内存）并逐步散列 . 您在自述文件中获得了基本用法和示例 .

  请注意，您需要HTML5 FileAPI，因此请务必检查它 . 测试文件夹中有一个完整的示例 .

  https://github.com/satazor/SparkMD5

  回复于 2024-04-28T17:18:30+08:00
• 7

  没有插件，您无法访问该二进制数据 . 您应该考虑使用基于Flash的上传工具 . 我有同事使用SWFUpload，但我不知道如何访问文件内容本身 . 您可能必须更改SWF本身以允许此操作 .

  回复于 2024-04-28T17:18:30+08:00
• 3

  使用MD5 function of CryptoJS和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中测试了该示例 .

  回复于 2024-04-28T17:18:30+08:00
• 4

  我不相信javascript中有一种方法可以访问文件上传的内容 . 因此，您无法查看文件内容以生成MD5总和 .

  然而，您可以将文件发送到服务器，然后服务器可以发回MD5总额或发回文件内容..但这是很多工作，可能不值得为您的目的 .

  回复于 2024-04-28T17:18:30+08:00
• 5

  在互联网上有几个脚本来创建MD5哈希 .

  webtoolkit中的那个很好，http://www.webtoolkit.info/javascript-md5.html

  虽然，我不相信它会访问本地文件系统，因为访问是有限的 .

  回复于 2024-04-28T17:18:30+08:00
• 2

  除了不可能在JS中获取文件系统访问权限之外，我不会在客户端生成的校验和中放任何信任 . 因此，在任何情况下都必须在服务器上生成校验和 . - Tomalak 2009年4月20日14:05

  在大多数情况下，这是无用的 . 您希望在客户端计算MD5，以便您可以将其与服务器端重新计算的代码进行比较，并确定如果它们不同则上传出错 . 我需要在处理大型科学数据文件的应用程序中这样做，其中接收未损坏的文件是关键 . 我的案例很简单，因为用户已经使用他们的数据分析工具计算了MD5，所以我只需要用文本字段向他们询问 .

  回复于 2024-04-28T17:18:30+08:00
• 22

  使用当前的HTML5，应该可以计算二进制文件的md5哈希值，但我认为之前的步骤是将banary数据BlobBuilder转换为String，我正在尝试执行此步骤：但尚未成功 .

  这是我试过的代码：Converting a BlobBuilder to string, in HTML5 Javascript

  回复于 2024-04-28T17:18:30+08:00
• 84

  HTML5 spark-md5和Q.

  假设你'e using a modern browser (that supports HTML5 File API), here'是如何计算一个大文件的 MD5 Hash （它将计算变量块上的哈希值）

  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>
  

  回复于 2024-04-28T17:18:30+08:00
• -1

  您需要使用FileAPI . 它可以在最新的FF和Chrome中使用，但不能在IE9中使用 . grab 上面建议的任何md5 JS实现 . 我试过这个并放弃它因为JS太慢（大图像文件上的分钟数） . 如果有人使用类型化数组重写MD5，可能会重新访问它 .

  代码看起来像这样：

  HTML:     
  <input type="file" id="file-dialog" multiple="true" accept="image/*">
  
  JS (w JQuery)
  
  $("#file-dialog").change(function() {
    handleFiles(this.files);
  });
  
  function handleFiles(files) {
      for (var i=0; i<files.length; i++) {
          var reader = new FileReader();
          reader.onload = function() {
          var md5 = binl_md5(reader.result, reader.result.length);
              console.log("MD5 is " + md5);
          };
          reader.onerror = function() {
              console.error("Could not read the file");
          };
          reader.readAsBinaryString(files.item(i));
       }
   }
  

  回复于 2024-04-28T17:18:30+08:00
• -3

  要获取文件的哈希值，有很多选项 . 通常问题是获取大文件的哈希真的很慢 .

  我创建了一个小库来获取文件的哈希值，文件的开头为64kb，结尾为64kb .

  实例：http://marcu87.github.com/hashme/和图书馆：https://github.com/marcu87/hashme

  回复于 2024-04-28T17:18:30+08:00