分享js-spark-md5使用教學課程
- 零下一度原創
- 2017-06-26 09:16:124637瀏覽
js-spark-md5是歪果仁開發的東西，有點多，但是我們只要一個js檔案即可，具體類別包我存在自己的oschina上，下載地址：
js-spark -md5是做什麼的？ js-spark-md5是號稱全宇宙最快的前端類別包，可以無需上傳檔案就快速獲取本地檔案md5.
可能你覺得這沒什麼，但是，當你做一個檔案系統時候，就有這需求，用這個簡單的前端類別函式庫就能實現你「秒傳」的功能！這裡我解釋下，每個檔案的md5值都是唯一的，這也是很多下載網站，會告訴你原始檔案的md5是多少，然後下載完畢讓你自行去對比下，如果一致，就表示檔案是完整的。
好了，正因為每個檔案的md5是一樣的，那麼，我們在做檔案上傳的時候，就只要在前端先取得要上傳的檔案md5，並且把檔案md5傳到伺服器，比較先前文件的md5，如果有相同的md5，我們只要把文件的名字傳到伺服器關聯之前的文件即可，並不需要再次去上傳相同的文件，再去耗費儲存資源、上傳的時間、網路頻寬。
js-spark-md5使用教學：
1.先引入js類別套件
2.寫入檔案表單
程式碼：
<!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>