Comment calculer le hachage md5 d'un fichier en utilisant javascript

Question

Existe-t-il un moyen de calculer le hachage MD5 d'un fichier avant le téléchargement vers le serveur en utilisant Javascript ?

Answer 1

Bien qu'il y ait Implémentations JS de l'algorithme MD5, les anciens navigateurs sont généralement incapables de lire les fichiers du système de fichiers local. .

J'ai écrit ça en 2009. Qu'en est-il des nouveaux navigateurs ?

Avec un navigateur qui supporte le FileAPI vous peut lire le contenu d'un fichier - l'utilisateur doit l'avoir sélectionné, soit avec une <input> ou par glisser-déposer. En janvier 2013, voici comment les principaux navigateurs se positionnent :

• FF 3.6 prend en charge Lecteur de fichiers FF4 supporte encore plus de fonctionnalités basées sur les fichiers
• Chrome prend en charge l'interface FileAPI depuis version 7.0.517.41
• Internet Explorer 10 est partiellement Support de l'interface FileAPI
• Opera 11.10 a support partiel pour FileAPI
• Safari - Je n'ai pas pu trouver une bonne source officielle à ce sujet, mais ce site suggère un support partiel à partir de 5.1, un support complet pour 6.0 . Un autre article rapporte quelques incohérences avec les anciennes versions de Safari

Comment ?

Voir le réponse ci-dessous par Benny Neugebauer qui utilise le Fonction MD5 de CryptoJS

Answer 2

J'ai créé une bibliothèque qui implémente le md5 incrémental afin de hacher efficacement les gros fichiers. Fondamentalement, vous lisez un fichier en morceaux (pour garder la mémoire basse) et le hacher de façon incrémentale. Vous trouverez l'utilisation de base et des exemples dans le fichier readme.

Soyez conscient que vous avez besoin de HTML5 FileAPI, donc assurez-vous de le vérifier. Il y a un exemple complet dans le dossier de test.

https://github.com/satazor/SparkMD5

Answer 3

Il est assez facile de calculer le hachage MD5 en utilisant la fonction Fonction MD5 de CryptoJS y el API HTML5 FileReader . L'extrait de code suivant montre comment vous pouvez lire les données binaires et calculer le hachage MD5 d'une image qui a été glissée dans votre navigateur :

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

Je recommande d'ajouter quelques CSS pour voir la zone de Drag & Drop :

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

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

Pour en savoir plus sur la fonctionnalité "glisser-déposer", cliquez ici : API de fichiers et lecteur de fichiers

J'ai testé l'échantillon dans Google Chrome Version 32.

Answer 4

Vous devez utiliser FileAPI. Il est disponible dans les derniers FF et Chrome, mais pas dans IE9. Prenez n'importe quelle implémentation JS md5 suggérée ci-dessus. J'ai essayé cela et l'ai abandonné parce que JS était trop lent (minutes sur les gros fichiers d'image). Je pourrais y revenir si quelqu'un réécrit MD5 en utilisant des tableaux typés.

Le code ressemblerait à quelque chose comme ceci :

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

Answer 5

Outre l'impossibilité d'obtenir accès au système de fichiers en JS, je n'aurais pas pas du tout confiance dans une somme de contrôle générée par le client. Donc générer la somme de contrôle sur le serveur est obligatoire dans tous les cas. - Tomalak 20 avril '09 à 14:05

Ce qui est inutile dans la plupart des cas. Vous voulez que le MD5 soit calculé côté client, afin de pouvoir le comparer avec le code recalculé côté serveur et conclure que le téléchargement s'est mal passé s'ils diffèrent. J'ai eu besoin de faire cela dans des applications travaillant avec de gros fichiers de données scientifiques, où la réception de fichiers non corrompus était essentielle. Mon cas était simple, car les utilisateurs avaient déjà calculé le MD5 à partir de leurs outils d'analyse de données, il me suffisait donc de le leur demander dans un champ de texte.