javascript - encriptar - libreria php js

Cómo calcular el hash md5 de un archivo usando javascript

Question

¿Hay alguna manera de calcular el hash MD5 de un archivo antes de cargarlo al servidor utilizando Javascript?

Answer 1

Además de la imposibilidad de obtener acceso al sistema de archivos en JS, no pondría ninguna confianza en una suma de comprobación generada por el cliente. Por lo tanto, generar la suma de comprobación en el servidor es obligatorio en cualquier caso. - Tomalak 20 de abril de 2009 a las 14:05

Lo cual es inútil en la mayoría de los casos. Desea que el MD5 se compute en el lado del cliente, para que pueda compararlo con el código recalculado en el servidor y concluir que la carga no fue correcta si difieren. He necesitado hacerlo en aplicaciones que trabajan con grandes archivos de datos científicos, donde la recepción de archivos no corruptos era clave. Mis casos fueron simples, porque los usuarios tenían el MD5 ya calculado a partir de sus herramientas de análisis de datos, por lo que solo tenía que pedírselo con un campo de texto.

Answer 2

HTML5 + spark-md5 y Q

Suponiendo que utiliza un navegador moderno (que admita HTML5 File API), así es como se calcula el Hash MD5 de un archivo grande (se calculará el hash en los fragmentos variables)

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>

Answer 3

Además, nunca debes confiar en el cliente. Tendrás que volver a hacer el hash una vez que se cargue.

Answer 4

Bueno, es posible leer archivos con HTML5 File API (ver la interfaz Blob). No probado, pero podrías hacerlo tal vez.

Answer 5

Con HTML5 actual debería ser posible calcular el hash md5 de un archivo binario, pero creo que el paso anterior sería convertir los datos banarios de BlobBuilder a String, estoy intentando hacer este paso: pero no he tenido éxito.

Este es el código que probé: Convertir un BlobBuilder en una cadena, en HTML5 Javascript

Answer 6

Creé una biblioteca que implementa md5 incremental para hacer grandes archivos de manera eficiente. Básicamente, usted lee un archivo en fragmentos (para mantener la memoria baja) y lo mezcla incrementalmente. Tienes un uso básico y ejemplos en el archivo Léame.

Tenga en cuenta que necesita HTML5 FileAPI, así que asegúrese de comprobarlo. Hay un ejemplo completo en la carpeta de prueba.

https://github.com/satazor/SparkMD5

Answer 7

Hay un par de secuencias de comandos en Internet para crear un Hash MD5.

El de webtoolkit es bueno, webtoolkit.info/javascript-md5.html

Aunque, no creo que tenga acceso al sistema de archivos local ya que el acceso es limitado.

Answer 8

Necesita usar FileAPI. Está disponible en los últimos FF y Chrome, pero no en IE9. Tome cualquier implementación de md5 JS sugerida anteriormente. Intenté esto y lo abandoné porque JS era demasiado lento (minutos en archivos de imagen grandes). Podría revisarlo si alguien reescribe MD5 usando matrices tipadas.

El código se vería así:

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 9

No creo que haya una forma en javascript para acceder al contenido de una carga de archivo. Por lo tanto, no puede ver el contenido del archivo para generar una suma MD5.

Sin embargo, puede enviar el archivo al servidor, que luego puede enviar una suma MD5 o enviar el contenido del archivo nuevamente ... pero eso es mucho trabajo y probablemente no valga la pena para sus propósitos.

Answer 10

Para obtener el hash de los archivos, hay muchas opciones. Normalmente, el problema es que es muy lento obtener el hash de archivos grandes.

Creé una pequeña biblioteca que obtiene el hash de archivos, con los 64 KB del inicio del archivo y los 64 KB del final.

Ejemplo en vivo: http://marcu87.github.com/hashme/ y biblioteca: https://github.com/marcu87/hashme

Answer 11

Si bien hay implementaciones JS del algoritmo MD5, los navegadores más antiguos generalmente no pueden leer archivos del sistema de archivos local .

Lo escribí en 2009. ¿Y qué hay de los nuevos navegadores?

Con un navegador que admita FileAPI , * puede * leer los contenidos de un archivo ; el usuario debe haberlo seleccionado, ya sea con un elemento <input> o arrastrando y soltando. A partir de enero de 2013, así es como los principales navegadores se acumulan:

• FF 3.6 admite FileReader , FF4 admite aún más funcionalidad basada en archivos
• Chrome es compatible con FileAPI desde la versión 7.0.517.41
• Internet Explorer 10 tiene compatibilidad parcial con FileAPI
• Opera 11.10 tiene soporte parcial para FileAPI
• Safari: no pude encontrar una buena fuente oficial para esto, pero este sitio sugiere soporte parcial de 5.1, soporte completo para 6.0 . Otro artículo informa algunas inconsistencias con las versiones anteriores de Safari

Answer 12

Sin un complemento, no puede acceder a esos datos binarios. Debería considerar el uso de una herramienta de carga basada en Flash. Tengo colegas que han usado SWFUpload , pero no sé cómo acceder al contenido del archivo. Es posible que deba modificar el SWF para permitir esto.

Answer 13

es bastante fácil calcular el hash MD5 utilizando la función MD5 de CryptoJS y la API de FileReader HTML5 . El siguiente fragmento de código muestra cómo puede leer los datos binarios y calcular el hash MD5 a partir de una imagen que ha sido arrastrada a su navegador:

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

Recomiendo agregar algo de CSS para ver el área de arrastrar y soltar:

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

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

Puede encontrar más información sobre la funcionalidad de arrastrar y soltar aquí: Archivo API y FileReader

Probé la muestra en Google Chrome versión 32.