前端通过spark-md5.js计算本地文件md5

2023-11-10

背景:

说到本人第一次使用spark-md5.js还是差不多一年以前的时候了,当时后台老大说要搞一个文件分片上传的功能。我当时就心想:what?啥是文件分片上传,完全没听过好吗?
至于我当时内心那个慌就不多描述了,总之文件分片上传需要一个识别文件的唯一标识,而md5是非常合适的。spark-md5.js就是前端在文件上传前在本地计算md5的很可靠的方案
spark-md5.js是外国人写的,如果英文底子好且想了解更多信息可以到npm网站了解:https://www.npmjs.com/package/spark-md5

使用:

首先要做的当然是在html文件中引入spark-md5.js咯,根据自己的需求可以引入压缩版或者开发版

在此之前必须说明,这里用到了html5提供的FileReader接口,目前实现了这个接口的浏览器有FireFox3.6+ 、chrome6+、IE10+,因此如果需要更多的兼容的话、抱歉,我目前也没有找到好的方法
关于FileReader,这里有一篇高质量的博文可以了解一下:https://blog.csdn.net/jackfrued/article/details/8967667
这里提供了两个方法;一种是用SparkMD5.hashBinary( ) 直接将整个文件的二进制码传入直接返回文件的md5、这种方法对于小文件会比较有优势——简单并且速度快。
另一种方法是利用js中File对象的slice( )方法(File.prototype.slice( ))将文件分片后逐个传入spark.appendBinary( )方法来计算、最后通过spark.end( )方法输出结果,很明显,这种方法对于大型文件会非常有利——不容易出错,并且能够提供计算的进度信息


我们开始吧,接下来上代码:
首先第一种方法:
            var running = false;    //running用于判断是否正在计算md5
            function doNormalTest( input ) {    //这里假设直接将文件选择框的dom引用传入
                
                if (running) {    // 如果正在计算、不允许开始下一次计算
                    return;
                }

                var fileReader = new FileReader(),    //创建FileReader实例
                    time;

                fileReader.onload = function (e) {    //FileReader的load事件,当文件读取完毕时触发
                    running = false;

                    // e.target指向上面的fileReader实例
                    if (file.size != e.target.result.length) {    //如果两者不一致说明读取出错
                       alert("ERROR:Browser reported success but could not read the file until the end.");
                    } else {
                        console.log(Finished loading!success!!);
                         return SparkMD5.hashBinary(e.target.result);    //计算md5并返回结果
                         
                    }
                };

                fileReader.onerror = function () {    //如果读取文件出错,取消读取状态并弹框报错
                    running = false;
                    alert("ERROR:FileReader onerror was triggered, maybe the browser aborted due to high memory usage.");
                };

                running = true;
                fileReader.readAsBinaryString( input.files[0] );    //通过fileReader读取文件二进制码
            };
接下上第二种方法:

            function doIncrementalTest( input ) {    //这里假设直接将文件选择框的dom引用传入
                if (running) {
                    return;
                }

                //这里需要用到File的slice( )方法,以下是兼容写法
                var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
                    file = input.files[0],
                    chunkSize = 2097152,                           // 以每片2MB大小来逐次读取
                    chunks = Math.ceil(file.size / chunkSize),
                    currentChunk = 0,
                    spark = new SparkMD5(),    //创建SparkMD5的实例
                    time,
                    fileReader = new FileReader();

                fileReader.onload = function (e) {

                    console("Read chunk number (currentChunk + 1) of  chunks ");

                    spark.appendBinary(e.target.result);                 // append array buffer
                    currentChunk += 1;

                    if (currentChunk < chunks) {
                        loadNext();
                    } else {
                        running = false;
                        console.log("Finished loading!");
                        return spark.end();     // 完成计算,返回结果
                    }
                };

                fileReader.onerror = function () {
                    running = false;
                    console.log("something went wrong");
                };

                function loadNext() {
                    var start = currentChunk * chunkSize,
                        end = start + chunkSize >= file.size ? file.size : start + chunkSize;

                    fileReader.readAsBinaryString(blobSlice.call(file, start, end));
                }

                running = true;
                loadNext();
            } 
接下来你只要在input的onchange事件处理程序中调用doNormalTest或doIncrementalTest方法,并将input元素的dom节点传入就可以了
除此之外,作者在他的demo里面也有使用的详细实例。如果觉得不明白可以直接通过下面的下载方法下载后看demo

下载:

最后,如果你需要这个工具可以通过npm直接安装,
npm i spark-md5
或者到作者的github上直接下载:


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端通过spark-md5.js计算本地文件md5 的相关文章

  • 【java笔记】常用接口(2):Consumer接口

    Consumer接口是一个消费型接口 泛型指定什么类型 就可以使用accept消费什么类型数据 直接输出 public class Demo public static void main String args method asd na
  • 高德地图弹窗使用vue模板

  • android 遍历assets下的文件

    在AssetManager中有个list 方法 传入你的子文件名称即可 String flLists this getAssets list your subdir 如果是根目录 那么就是这么写 AssetManager assetMana
  • 集合框架的简要介绍

    目录 集合和数组的区别 Collection接口 ArrayList实现类 ArrayList的创建和使用 linkedList Set接口及其实现类 Set接口特点 HashSet实现类 HashSet特点 HashSet避免对象重复的规
  • Service能够创建界面(addView)吗?

    一个Service能够创建界面 addView 吗 一个app 只有Service 没有Activity 能够通过WindowManager调用addView 添加可视界面吗 答案是可以 但是能够创建的界面类型 WindowManager
  • 虚拟化原理介绍

    什么是虚拟化 一台PC机的组成包括 Keyboard 键盘 Monitor 显示器 CPU RAM I O Disk Network 这是基本的五大部件 虚拟化就是在这些基础物理设备上运行多个OS 虚拟化面临的重要问题概述 CPU RAM
  • Android :提取字符串当中的数字

    String a String regEx 0 9 Pattern p Pattern compile regEx Matcher m p matcher fl System out println m replaceAll trim 结果
  • 含测试点归纳

    小编提示 本文含静态测试主要检查点 纯干货 看官们可先收藏后阅读 从是否执行被测试软件来进行分类 测试可以分为静态测试和动态测试 软件本身包含了各种代码 如果只是检查代码和文档 而不执行被测试的软件 此时所进行的就是静态测试 反之 如果在测
  • 解决Jasperreport的web 套打

    前段时间写了一篇 解决Jasperreport的web打印另一种方法http www blogjava net three 3 archive 2010 06 24 324329 html 关于在web中的打印 套打是经常被提到的 这个需求
  • Spring学习04

    文章目录 与持久层整合 与Mybatis整合 事务处理 Spring控制事务开发 事务属性 隔离属性 isolation 传播属性 propagation 只读属性 read only 超时属性 timeout 异常属性 实践使用 基于标签
  • 使用sqlite3 模块操作sqlite3数据库

    Python内置了sqlite3模块 可以操作流行的嵌入式数据库sqlite3 如果看了我前面的使用 pymysql 操作MySQL数据库这篇文章就更简单了 因为它们都遵循PEP 249 所以操作方法几乎相同 废话就不多说了 直接看代码吧
  • 从零开始搭建kafka开发环境

    Part1前言 最近选用kafka作为消息缓存 来低于大流量的数据 Kafka是一种高吞吐量的分布式发布订阅消息系统 有如下特性 通过O 1 的磁盘数据结构提供消息的持久化 这种结构对于即使数以TB的消息存储也能够保持长时间的稳定性能 高吞
  • scanf("%s")读取字符串

    关于c语言字符串读取 可以看出 读取的起始位置就是自己传入的位置 如果写成scanf s a 则默认就是起始地址 这里需要注意的是 由于scanf s 遇到空白符停止的特点 输出数组时候需要指定起始地址为读入时候的地址 否则没有输出 求长度
  • [Office] WPS Excel通过添加宏实现多张表格合并

    在我们使用Excel时 通常会遇到让各个地区 各个学院或下属单位收集数据的情况 有时还会每月 每周 甚至是每日调度数据 而当我们得到了这些Excel文件表格之后 很多同志会进行人工手动汇总 这大大降低了办公的效率 本文主要介绍WPS Exc
  • 用Unity开发一款2D横版游戏demo

    LanW Game Project 目录 一 介绍 二 安装教程 三 开发流程 1 新建工程 2 设置人物 3 控制主角的移动 4 添加切换动作的动画 5 镜头跟踪 6 收集物体 7 创建ui 8 创建敌人 9 制作敌人ai 10 创建青蛙
  • Python连接Hive

    1 Hiveserver1 HiveServer2 1 1 HiveServer1 HiveServer是一个可选的服务 能够允许远程客户端使用各种编程语言向hive提交请求并检索结果 Hiveserver是建立在Apache Thrift
  • 什么是DFX设计?

    DFX是面向产品生命周期各环节的设计 其中X代表产品生命周期的某一个环节或特性 它是一种新的设计技术 在设计阶段尽可能早地考虑产品的性能 质量 可制造性 可装配性 可测试性 产品服务和价格等因素 对产品进行优化设计或再设计 常见的DFX主要
  • pandas(三)数据查询

    数值 列表 区间 条件 函数 Pandas查询数据的几种方法 df loc方法 根据行 列的标签值查询 df iloc方法 根据行 列的数字位置查询 df where方法 df query方法 loc既能查询 又能覆盖写入 强烈推荐 Pan
  • 发电机机房设计规范_柴油发电机房建筑防火与消防设施要求!

    来源 消防资源网 如有侵权 请联系删除 一 布置在民用建筑内的柴油发电机房应符合下列规定 5 4 13 1 宜布置在首层或地下一 二层 2 不应布置在人员密集场所的上一层 下一层或贴邻 3 应采用耐火极限不低于2 00h的防火隔墙和1 50

随机推荐

  • 【Python】python中列表元素的删除方法

    python中列表元素的删除方法 1 删除指定位置的值 pop 函数 可以结合 a b c d a e
  • LeetCode 344 反转字符串 --s[:]=s[::-1]和s[:]=s[::-1]的不同

    编写一个函数 其作用是将输入的字符串反转过来 输入字符串以字符数组 char 的形式给出 不要给另外的数组分配额外的空间 你必须原地修改输入数组 使用 O 1 的额外空间解决这一问题 你可以假设数组中的所有字符都是 ASCII 码表中的可打
  • 滤波方法总结

    经典滤波方法主要有低通 高通 带通 带阻滤波 相关滤波 限幅滤波 中值滤波 基于拉依达准则的奇异数据滤波 基于中值数绝对偏差的决策滤波 算术平均滤波 滑动平均滤波 加权滑动平均滤波 一价滞后滤波 加权递推平均滤波 消抖滤波 限幅消抖滤波 维
  • soamanager 弹不出浏览器

    https www cnblogs com WACBZWY p 11970420 html 输入SOAMANGER左下角提示正在启动 一闪而过 并没有弹出浏览器 se24 将 CL GUI HTML VIEWER类中 方法 DETACH U
  • 00 SD卡知识简介

    具体可见如下文章 源地址 SD卡介绍
  • ZooKeeper之(六)应用实例

    6 1 Java API 客户端要连接 Zookeeper服务器可以通过创建 org apache zookeeper ZooKeeper 的一个实例对象 然后调用这个类提供的接口来和服务器交互 ZooKeeper 主要是用来维护和监控一个
  • pybind11传输文件

    python open之后的bytes 加长度 c 接收string 需要时pBuffer c str 和长度就ok了 c 别用char 在linux下有时会报错 代码 c using namespace std int add perso
  • 毕业设计(基于TensorFlow的深度学习与研究)之总结概述篇

    阅读本文大概需要 10 分钟 前言 今天是2020 07 30 距离我答辩已经过去1个月时间 距离我完成论文初稿并在paperpass上查重已经过去4个月时间 经过这么长时间的思考 沉淀 我将在本文中主要涉及3个方面的内容 希望能够给即将进
  • Pandas数据的导入与导出

    Excel格式数据导入 文件格式 读取方法 Excel文件 read excel CSV文件 read csv txt文件 read table Json文件 read json MySQL文件 read sql table 对于上述这些方
  • 圆形电子围栏检测嵌入式C实现

    js代码 fileoverview GeoUtils类提供若干几何算法 用来帮助用户判断点与矩形 圆形 多边形线 多边形面的关系 并提供计算折线长度和多边形的面积的公式 主入口类是 a href symbols BMapLib GeoUti
  • linux修改时区 修正时间

    1 tzselect 2 选择Asia 3 选择china 4 选择beijing 5 最后执行TZ Asia Shanghai export TZ 6 重启
  • html弹窗口并获取返回值,Js 弹出框口并返回值的两种常用方法

    1 window showModalDialog url args dialogattrs 参数说明 url 弹出页面地址 agrs 主窗口传给对话框的参数 可以是任意类型 数组也可以 dialogattrs 弹出窗口的样式参数 模式对话框
  • 【面试精讲】Java:Exception 和 Error 有什么区别?

    前言 众所周知 没有 BUG 的程序只会出现在程序员的梦里 异常情况如影随形地纠缠着我们 只有正确处理好意外情况 才能保证程序的可靠性 Java 语言在设计之初就提供了相对完善的异常处理机制 这也是 Java 得以大行其道的原因之一 因为这
  • NVIDIA GPU 算力表

    来自nvidia官方 https developer nvidia com cuda gpus
  • 线程同步

    线程同步 作者 buaawhl 我们可以在计算机上运行各种计算机软件程序 每一个运行的程序可能包括多个独立运行的线程 Thread 线程 Thread 是一份独立运行的程序 有自己专用的运行栈 线程有可能和其他线程共享一些资源 比如 内存
  • Selenium系列教程 - 文件上传

    主要内容 一 通过send keys方法 该方法只适用于input标签 二 通过AutoIt来处理上传文件 适用所有 三 其他方法 四 多文件上传 在Web UI自动化测试中可能会遇到文件上传的场景 针对该场景我们要区分上传按钮的种类 大体
  • 第四周作业

    实验作业 1 完成课本每一个编程题 要求先画出流程算法图或N S图 然后编程实现 有可能的话使用两种以上方法 2 编程求 百钱百鸡 问题 鸡翁一值钱五 鸡母 一值钱三 鸡雏三值钱一 百钱买百鸡 问鸡翁 鸡母 鸡雏各几何 3 编程输入一个整数
  • centos7下boot空间不足解决办法

    root localhost admin rpm qa grep kernel 看下有哪些 然后用yum remove kernel devel 3 10 0 327 el7 x86 64 删除
  • 创建Numpy数组(zeros()、ones()、empty()、arange())

    创建Numpy数组 zeros 创建出来的数组里边的元素都是0 例如 data01 np zeros 3 4 print data01 ones 创建出来的数组里边的元素都是1 例如 data02 np ones 3 4 print dat
  • 前端通过spark-md5.js计算本地文件md5

    背景 说到本人第一次使用spark md5 js还是差不多一年以前的时候了 当时后台老大说要搞一个文件分片上传的功能 我当时就心想 what 啥是文件分片上传 完全没听过好吗 至于我当时内心那个慌就不多描述了 总之文件分片上传需要一个识别文