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

基于js-spark-md5前端js类库，快速获取文件Md5值的更多相关文章

  1. 获取文件MD5值(JS、JAVA)

    文章HTML代码翻译于地址:https://www.cnblogs.com/linyihai/p/7040786.html           文件MD5有啥用?                  文 ...

  2. Windows 系统快速查看文件MD5

    关键 ·打开命令窗口(Win+R),然后输入cmd ·输入命令certutil -hashfile 文件绝对路径 MD5 快速获取文件绝对路径 ·找到文件,右键属性 注意 ·在Win7上,MD5不要使 ...

  3. C#获取文件MD5字符串

    备注 哈希函数将任意长度的二进制字符串映射为固定长度的小型二进制字符串.加密哈希函数有这样一个属性:在计算不大可能找到散列为相同的值的两个不同的输入:也就是说,两组数据的哈希值仅在对应的数据也匹配时才 ...

  4. 运用CMD命令关于快速获取文件夹名称和快速建立文件夹

    前些天头儿让我建立一本本的文件夹,让后交给我了几个命令,快速获取文件夹的名称和快速建立文件夹,省去了一个个的按F2,一个个的复制,粘贴,一个个的新建,再复制粘贴. 首先讲一下第一个问题,快速获取文件夹 ...

  5. QT 获取文件MD5值

    /* 方法1 */ QFile theFile(fileNamePath); theFile.open(QIODevice::ReadOnly); QByteArray ba = QCryptogra ...

  6. JAVA中获取文件MD5值的四种方法

    JAVA中获取文件MD5值的四种方法其实都很类似,因为核心都是通过JAVA自带的MessageDigest类来实现.获取文件MD5值主要分为三个步骤,第一步获取文件的byte信息,第二步通过Messa ...

  7. c#获取文件MD5算法

    //获取文件MD5算法 private static string GetMD5FromFile(string fileName) { try { FileStream file = new File ...

  8. C# 获取文件MD5值的方法

    可用于对比文件是否相同 /// <summary> /// 获取文件MD5值 /// </summary> /// <param name="fileName& ...

  9. js获取文件MD5值

    原文链接:http://www.jianshu.com/p/940a9226fbbd   要在web页面中计算文件的md5值,还好这个项目是只需兼容现代浏览器的,不然要坑死了. 其实对文件进行md5, ...

随机推荐

  1. Log表新的RowKey设计，预Split

    1 目前Rawlog表的问题 region数量庞大,空region 率大 共有12791个region 11409空region, 比例为89.19% 剩余的region大小也是极度不均衡,最大的re ...

  2. nodejs Async详解之二：工具类

    Async中提供了几个工具类,给我们提供一些小便利: memoize unmemoize log dir noConflict 1. memoize(fn, [hasher]) 有一些方法比较耗时,且 ...

  3. Gitlab汉化为中文版

    查看当前的gitlab版本号 cat /opt/gitlab/embedded/service/gitlab-rails/VERSION 11.1.4 打开这个网址:https://gitlab.co ...

  4. 后台管理系统-使用AdminLTE搭建前端

    返回总目录<ABP项目实战-后台管理系统-目录> 安装AdminLte 我们通过Nuget包管理器安装AdminLte 引用三方组件 因为AdminLte使用到了很多三方的组件,所以我们需 ...

  5. 2017 ACM/ICPC Asia Regional Qingdao Online Solution

    A : Apple 题意:给出三个点,以及另一个点,求最后一个点是否在三个点的外接圆里面,如果在或者在边界上,输出“Rejected”,否则输出"Accepted" 思路:先求一个 ...

  6. Java 异步处理 三种实现

    new Thread((new Runnable() { @Override public void run() { // 批量同步数据 try { logger.info("^^^^^^^ ...

  7. zoj3696Alien's Organ （二项分布，泊松分布求近似值）

    /*二项分布即重复n次的伯努利试验,每次发生的概率一样,假设成功的概率是p,那么失败的概率就是1-p: 二项分布的概率公式:试验中发生K次的概率是 P(ξ=K)= C(n,k) * p^k * (1- ...

  8. 前端学习笔记之CSS文档流

    先引用一段W3C的文档: 9.3 Positioning schemes In CSS 2.1, a box may be laid out according to three positionin ...

  9. Spring Boot与数据

    SpringBoot 着眼于JavaEE! 不仅仅局限于 Mybatis .JDBC. Spring Data JPA Spring Data 项目的目的是为了简化构建基于 Spring 框架应用的数 ...

  10. POJ 3281 Dining（最大流）

    http://poj.org/problem?id=3281 题意: 有n头牛,F种食物和D种饮料,每头牛都有自己喜欢的食物和饮料,每种食物和饮料只能给一头牛,每头牛需要1食物和1饮料.问最多能满足几 ...