Heim > Artikel > Web-Frontend > Teilen Sie das Tutorial zur Verwendung von js-spark-md5
Teilen Sie das Tutorial zur Verwendung von js-spark-md5
- 零下一度Original
- 2017-06-26 09:16:124626Durchsuche
js-spark-md5 ist etwas, das von Wai Guoren entwickelt wurde, aber wir benötigen nur eine JS-Datei. Ich speichere das spezifische Klassenpaket auf meiner eigenen Oschina-Download-Adresse js-spark -Was macht md5? js-spark-md5 ist als das schnellste Front-End-Klassenpaket im Universum bekannt. Es kann schnell lokale Dateien abrufen, ohne Dateien hochladen zu müssen.
Vielleicht denken Sie, dass dies nichts ist, aber wenn Sie ein Dateisystem erstellen , Wenn Sie diesen Bedarf haben, können Sie diese einfache Front-End-Klassenbibliothek verwenden, um Ihre Funktion „zweiter Transfer“ zu realisieren! Lassen Sie mich hier erklären, dass der MD5-Wert jeder Datei eindeutig ist. Viele Download-Websites geben Ihnen den MD5-Wert der Originaldatei an und lassen ihn dann selbst vergleichen. Wenn er konsistent ist, bedeutet dies, dass die Datei vollständig ist. von.
Okay, da der MD5 jeder Datei derselbe ist, müssen wir beim Hochladen von Dateien nur den MD5 der hochzuladenden Datei am Frontend abrufen und den MD5 der Datei übertragen Beim Vergleich der MD5 der vorherigen Datei müssen wir nur den Dateinamen an den Server übertragen, um die vorherige Datei erneut hochzuladen, was Speicherplatz verbraucht Ressourcen, Upload-Zeit und Netzwerkbandbreite.
js-spark-md5-Nutzungsanleitung:
1. Stellen Sie zuerst das js-Klassenpaket vor
2. Schreiben Sie das Dateiformular
Code:
<!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>