Cómo calcular el hash md5 de un archivo usando javascript
¿Hay alguna manera de calcular el hash MD5 de un archivo antes de cargarlo en el servidor usando Javascript?
Si bien existen implementaciones JS del algoritmo MD5, los navegadores más antiguos generalmente no pueden leer archivos del sistema de archivos local .
Escribí eso en 2009. Entonces, ¿qué pasa con los nuevos navegadores?
Con un navegador que admita FileAPI , puede leer el contenido de un archivo ; el usuario debe haberlo seleccionado, ya sea con un <input>elemento o arrastrando y soltando. En enero de 2013, así es como se comparan los principales navegadores:
- FF 3.6 admite FileReader , FF4 admite aún más funciones basadas en archivos
- Chrome admite FileAPI desde la versión 7.0.517.41
- Internet Explorer 10 tiene soporte parcial para 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 desde 5.1 y soporte total para 6.0 . Otro artículo informa algunas inconsistencias con las versiones anteriores de Safari.
¿Cómo?
Vea la respuesta a continuación de Benny Neugebauer que utiliza la función MD5 de CryptoJS
Es bastante fácil calcular el hash MD5 utilizando la función MD5 de CryptoJS y la API HTML5 FileReader . El siguiente fragmento de código muestra cómo puede leer los datos binarios y calcular el hash MD5 a partir de una imagen 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 Arrastrar y soltar aquí: File API y FileReader
Probé la muestra en Google Chrome versión 32.
