基於js-spark-md5前端js類庫,快速獲取文件Md5值


js-spark-md5是歪果仁開發的東西,有點多,但是我們只要一個js文件即可,具體類包我存在自己的oschina上,下載地址:https://git.oschina.net/jianqingwang/js-spark-md5

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></pre>
<script src="//cdn.rawgit.com/satazor/SparkMD5/master/spark-md5.min.js"></script>
<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>

</body>
</html>

注意,spark.end()就是文件的md5值,文件引用順序一定不能倒了,要不無法正常工作。

正常工作的截圖:

本人博客:基於js-spark-md5前端js類庫,快速獲取文件Md5值

http://www.wangtuizhijia.com/archives/308


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM