Wie man md5-Hash einer Datei mit Javascript berechnen

Question

Gibt es eine Möglichkeit, den MD5-Hash einer Datei vor dem Upload auf den Server mit Javascript zu berechnen?

Answer 1

Es gibt zwar JS-Implementierungen des MD5-Algorithmus, ältere Browser können im Allgemeinen keine Dateien aus dem lokalen Dateisystem lesen .

Das habe ich 2009 geschrieben. Und was ist mit neuen Browsern?

Mit einem Browser, der die FileAPI Sie puede den Inhalt einer Datei lesen - muss der Nutzer sie ausgewählt haben, entweder mit einem <input> Element oder durch Ziehen und Ablegen. Stand Januar 2013: So sehen die wichtigsten Browser aus:

• FF 3.6 unterstützt FileReader FF4 unterstützt noch mehr dateibasierte Funktionen
• Chrome unterstützt die FileAPI seit Version 7.0.517.41
• Internet Explorer 10 hat teilweise FileAPI-Unterstützung
• Opera 11.10 hat Teilweise Unterstützung für FileAPI
• Safari - Ich konnte keine gute offizielle Quelle dafür finden, aber diese Website bietet eine teilweise Unterstützung ab 5.1, volle Unterstützung für 6.0 . Ein anderer Artikel berichtet einige Unstimmigkeiten mit den älteren Safari-Versionen

Wie?

Siehe die Antwort unten von Benny Neugebauer die die MD5-Funktion von CryptoJS

Answer 2

Ist es ziemlich einfach, den MD5-Hash zu berechnen, indem man die MD5-Funktion von CryptoJS et le HTML5 FileReader API . Der folgende Codeausschnitt zeigt, wie Sie die Binärdaten lesen und den MD5-Hash aus einem Bild berechnen können, das in Ihren Browser gezogen wurde:

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);
};

Ich empfehle, etwas CSS hinzuzufügen, um den Drag & Drop-Bereich zu sehen:

#holder {
  border: 10px dashed #ccc;
  width: 300px;
  height: 300px;
}

#holder.hover {
  border: 10px dashed #333;
}

Mehr über die Drag & Drop-Funktionalität finden Sie hier: Datei-API & FileReader

Ich habe das Beispiel in Google Chrome Version 32 getestet.

Answer 3

Ich habe eine Bibliothek erstellt, die inkrementelles md5 implementiert, um große Dateien effizient zu hashen. Im Grunde lesen Sie eine Datei in Chunks (um den Speicherplatz gering zu halten) und Hash es inkrementell. In der Readme-Datei finden Sie die grundlegende Verwendung und Beispiele.

Seien Sie sich bewusst, dass Sie HTML5 FileAPI benötigen, also stellen Sie sicher, dass Sie es haben. Ein vollständiges Beispiel befindet sich im Testordner.

https://github.com/satazor/SparkMD5

Answer 4

Das folgende Snippet zeigt ein Beispiel, das einen Durchsatz von 400 MB/s beim Lesen und Hashing der Datei archivieren kann.

Es verwendet eine Bibliothek namens Hash-Wasm die auf WebAssembly basiert und den Hash schneller berechnet als reine js- Bibliotheken. Ab 2020 unterstützen alle modernen Browser WebAssembly.

const chunkSize = 64 * 1024 * 1024;
const fileReader = new FileReader();
let hasher = null;

function hashChunk(chunk) {
  return new Promise((resolve, reject) => {
    fileReader.onload = async(e) => {
      const view = new Uint8Array(e.target.result);
      hasher.update(view);
      resolve();
    };

    fileReader.readAsArrayBuffer(chunk);
  });
}

const readFile = async(file) => {
  if (hasher) {
    hasher.init();
  } else {
    hasher = await hashwasm.createMD5();
  }

  const chunkNumber = Math.floor(file.size / chunkSize);

  for (let i = 0; i <= chunkNumber; i++) {
    const chunk = file.slice(
      chunkSize * i,
      Math.min(chunkSize * (i + 1), file.size)
    );
    await hashChunk(chunk);
  }

  const hash = hasher.digest();
  return Promise.resolve(hash);
};

const fileSelector = document.getElementById("file-input");
const resultElement = document.getElementById("result");

fileSelector.addEventListener("change", async(event) => {
  const file = event.target.files[0];

  resultElement.innerHTML = "Loading...";
  const start = Date.now();
  const hash = await readFile(file);
  const end = Date.now();
  const duration = end - start;
  const fileSizeMB = file.size / 1024 / 1024;
  const throughput = fileSizeMB / (duration / 1000);
  resultElement.innerHTML = `
    Hash: ${hash}<br>
    Duration: ${duration} ms<br>
    Throughput: ${throughput.toFixed(2)} MB/s
  `;
});

<script src="https://cdn.jsdelivr.net/npm/hash-wasm"></script>
<!-- defines the global `hashwasm` variable -->

<input type="file" id="file-input">
<div id="result"></div>

Answer 5

HTML5 + spark-md5 y Q

Unter der Annahme, dass Sie einen modernen Browser verwenden (der HTML5 File API unterstützt), können Sie die MD5-Hash einer großen Datei (es wird der Hash auf variablen Chunks berechnet)

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>