首頁  >  文章  >  web前端  >  分享js-spark-md5使用教學課程

分享js-spark-md5使用教學課程

零下一度
零下一度原創
2017-06-26 09:16:124625瀏覽

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>

注意,spark.end()就是檔案的md5值,檔案參考順序一定不能倒了,要不無法正常運作。

正常運作的截圖:

本人部落格:基於js-spark-md5前端js類別庫,快速取得檔案M​​d5值


以上是分享js-spark-md5使用教學課程的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn