zoukankan      html  css  js  c++  java
  • 基于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+="
    read chunk number "+parseInt(currentChunk+1)+" of "+chunks;
                        spark.append(e.target.result); // append array buffer
                        currentChunk++;
                        if (currentChunk < chunks)
                            loadNext();
                        else
                            log.innerHTML+="
    加载结束 :
    
    计算后的文件md5:
    "+spark.end()+"
    
    现在你可以选择另外一个文件!
    ";
                    },
                    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

  • 相关阅读:
    Winpcap网络开发库入门
    主机字节序与网络字节序的转换
    WORD与DWORD
    TCP/IP各种数据包结构体
    解析IPV4报文 和IPV6 报文的 checksum
    TCP头校验和计算算法详解
    第九次作业:DFA最小化,语法分析初步
    第八次作业:非确定的自动机NFA确定化为DFA
    第七次:正规式、正规文法与自动机
    第六次作业:正规文法与正规式
  • 原文地址:https://www.cnblogs.com/jianqingwang/p/6999356.html
Copyright © 2011-2022 走看看