Partager le didacticiel d'utilisation de js-spark-md5
js-spark-md5 est quelque chose développé par Wai Guoren. Il y a beaucoup de choses, mais nous n'avons besoin que d'un seul fichier js. Je stocke le package de classe spécifique sur mon propre oschina. 🎜>js-spark -Que fait md5 ? js-spark-md5 est connu comme le package de classe front-end le plus rapide de l'univers. Il peut obtenir rapidement le fichier md5 local sans télécharger de fichiers
Vous pensez peut-être que ce n'est rien, mais lorsque vous créez un système de fichiers. , Si vous avez ce besoin, vous pouvez utiliser cette simple bibliothèque de classes frontales pour réaliser votre fonction « deuxième transfert » ! Laissez-moi vous expliquer ici, la valeur md5 de chaque fichier est unique. De nombreux sites de téléchargement vous indiqueront la valeur md5 du fichier original, puis vous permettront de la comparer vous-même après le téléchargement. Si elle est cohérente, cela signifie que le fichier est complet. de.
D'accord, parce que le md5 de chaque fichier est le même, alors lorsque nous téléchargeons des fichiers, il suffit d'obtenir le md5 du fichier à télécharger sur le front-end, et de transférer le md5 du fichier vers le serveur. En comparant le md5 du fichier précédent, si le même md5 existe, il suffit de transférer le nom du fichier sur le serveur pour associer le fichier précédent. Il n'est pas nécessaire de télécharger à nouveau le même fichier, ce qui consommera des ressources de stockage. , le temps de téléchargement et la bande passante du réseau.
Tutoriel d'utilisation de js-spark-md5 :
1. Présentez d'abord le package de classe js
2 Écrivez le formulaire de fichier
Code :
Notez que spark.end() est la valeur md5 du fichier. L'ordre de référence du fichier ne doit pas être inversé, sinon il ne fonctionnera pas correctement.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form method="POST" enctype="multipart/form-data" onsubmit="return false;" > <input id=file type=file placeholder="select a file" /> </form> <pre id=log><script> var log=document.getElementById("log"); document.getElementById("file").addEventListener("change", function() { var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice, file = this.files[0], chunkSize = 2097152, // read in chunks of 2MB chunks = Math.ceil(file.size / chunkSize), currentChunk = 0, spark = new SparkMD5.ArrayBuffer(), frOnload = function(e){ // log.innerHTML+="\nread chunk number "+parseInt(currentChunk+1)+" of "+chunks; spark.append(e.target.result); // append array buffer currentChunk++; if (currentChunk < chunks) loadNext(); else log.innerHTML+="\n加载结束 :\n\n计算后的文件md5:\n"+spark.end()+"\n\n现在你可以选择另外一个文件!\n"; }, frOnerror = function () { log.innerHTML+="\糟糕，好像哪里错了."; }; function loadNext() { var fileReader = new FileReader(); fileReader.onload = frOnload; fileReader.onerror = frOnerror; var start = currentChunk * chunkSize, end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize; fileReader.readAsArrayBuffer(blobSlice.call(file, start, end)); }; loadNext(); }); </script>