<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <meta http-equiv="Pragma" content="no-cache" />

     </head>

     <body>

         <input type="file" id="audio" />

         <div id="handler_info"></div>

         <div class="progressbar"></div>

     </body>

     <script src="js/spark-md5.js" type="text/javascript" charset="utf-8"></script>

     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

     <script type="text/javascript">

         $("#audio").on("change", function() {

             let file = $("#audio")[0].files[0];

             if(!file) {

                 $("#audio_name").text('选择音频');

                 $(".progressbar").attr('value', 0);

                 $("#handler_info").html('');

                 filemd5 = '';

             } else {

                 $("#audio_name").text(file.name);

                 get_filemd5sum(file)

             }

         });

         function get_filemd5sum(ofile) {

             var file = ofile;

             var tmp_md5;

             var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,

                 // file = this.files[0],

                 chunkSize = 8097152, // Read in chunks of 2MB

                 chunks = Math.ceil(file.size / chunkSize),

                 currentChunk = 0,

                 spark = new SparkMD5.ArrayBuffer(),

                 fileReader = new FileReader();

             fileReader.onload = function(e) {

                 // console.log('read chunk nr', currentChunk + 1, 'of', chunks);

                 spark.append(e.target.result); // Append array buffer

                 currentChunk++;

                 var md5_progress = Math.floor((currentChunk / chunks) * 100);

                 console.log(file.name + "  正在处理，请稍等," + "已完成" + md5_progress + "%");

                 var handler_info = document.getElementById("handler_info");

                 var progressbar = document.getElementsByClassName("progressbar")[0];

                 handler_info.innerHTML = file.name + "  正在处理，请稍等," + "已完成" + md5_progress + "%"

                 progressbar.value = md5_progress;

                 if(currentChunk < chunks) {

                     loadNext();

                 } else {

                     tmp_md5 = spark.end();

                     filemd5 = tmp_md5;

                     console.log(tmp_md5)

                     handler_info.innerHTML = file.name + "的MD5值是：" + tmp_md5;

                 }

             };

             fileReader.onerror = function() {

                 console.warn('oops, something went wrong.');

             };

             function loadNext() {

                 var start = currentChunk * chunkSize,

                     end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;

                 fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));

             }

             loadNext();

         }

     </script>

 </html>

唯一需要注意的一点是，那个spark-md5.js的文件大家需要去下载。然后这里面的东西都是写好的。

文件进行MD5计算的更多相关文章

  1. python计算文件的md5值

    前言 最近要开发一个基于python的合并文件夹/目录的程序,本来的想法是基于修改时间的比较,即判断文件有没有改变,比较两个文件的修改时间即可.这个想法在windows的pc端下测试没有问题. 但是当 ...

  2. C#计算文件的MD5值实例

    C#计算文件的MD5值实例 MD5 是 Message Digest Algorithm 5(信息摘要算法)的缩写,MD5 一种散列(Hash)技术,广泛用于加密.解密.数据签名和数据完整性校验等方面 ...

  3. 计算字符串和文件的MD5值

    //计算字符串的MD5值 public string GetMD5(string sDataIn) { MD5CryptoServiceProvider md5 = new MD5CryptoServ ...

  4. c#计算文件的MD5值

    代码: /// <summary> /// 计算文件的 MD5 值 /// </summary> /// <param name="fileName" ...

  5. 计算指定文件的MD5值

    /// <summary> /// 计算指定文件的MD5值 /// </summary> /// <param name="fileName"> ...

  6. 通过python的hashlib模块计算一个文件的MD5值

    Python的hashlib提供了很多摘要算法,如MD5,SHA1等常用算法. 什么是摘要算法呢?摘要算法又称哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一个长度固定的数据串(如MD5值 ...

  7. 计算某个目录下所有文件的MD5值

    #!/usr/bin/env python #-*- coding:utf-8 -*- ''' 计算某个目录下所有文件的MD5值 ''' import os import sys import has ...

  8. c# 计算字符串和文件的MD5值的方法

    快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中.   <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...

  9. Cocos Creator 热更新文件MD5计算和需要注意的问题

    Creator的热更新使用jsb.热更新基本按照 http://docs.cocos.com/creator/manual/zh/advanced-topics/hot-update.html?h=% ...

随机推荐

  1. 《T-SQL查询》读书笔记Part 3.索引的基本知识

    索引优化是查询优化中最重要的一部分,索引是一种用于排序和搜索的结构,在查找数据时索引可以减少对I/O的需要:当计划中的某些元素需要或是可以利用经过排序的数据时,也会减少对排序的需要.某些方面的优化可以 ...

  2. 在mac OX10.11.6上安装MySQL

    一.之前失败情况 官网下载dmg文件安装.源码安装,下过5.6  5.7  8.0 版本,都可以安装成功,但是在电脑设置界面无法启动,每次点启动输入密码后,均闪一下绿色然后变红色,既然不能界面启动,那 ...

  3. File文件操作学习总结

    1.java.io.file用于表示文件(目录),也就是说程序员可以通过File类在程序中操作硬盘上的文件和目录, 2.File类只能用于表示文件(目录)的信息(名称和大小),不能对文件内容进行访问. ...

  4. 向Oracle数据库插入中文乱码解决方法

    解决方法:    第一步:sqlplus下执行:select userenv('language') from dual;//查看oracle字符集     注:如果oracle字符集与后台代码设置的 ...

  5. 出现“Unable to resolve target 'android-XXX'”怎么处理？

    这句话的中文意思就是说安卓API版本没有能适配22的,需要将sdk更新一下,必要的话,adt都要跟着更新,但就我尝试来看,还是要先更新adt,然后您或许发现,这个表单好不容易刷出来,但是没有我们想要的 ...

  6. WPF 毛笔字

    1.先来看看InkCanvas的一般用法: <InkCanvas>     <InkCanvas.DefaultDrawingAttributes>           < ...

  7. requests发送post请求的一些疑点

    前言 在Python爬虫中,使用requests发送请求,访问指定网站,是常见的做法.一般是发送GET请求或者POST请求,对于GET请求没有什么好说的,而发送POST请求,有很多朋友不是很清楚,主要 ...

  8. 陌陌架构分享 – Apple Push Notification Service

    http://blog.latermoon.com/?p=878 先描述下基本概念,标准的iPhone应用是没有后台运行的,要实现实时推送消息到手机,需要借助Apple提供的APNS服务. iPhon ...

  9. 玩转Web之SSH--Heibernate （一）---第一个demo

    最近在学heibernate,是看马士兵老师的视频学的,在这里总结一下,做点笔记.关于heibernate的优点,大家可以在网上 百度,这里不做赘述,直接讲怎么使用heibernate 步骤一:新建项 ...

  10. vagrant命令

    $ vagrant init      # 初始化 $ vagrant up        # 启动虚拟机$ vagrant halt      # 关闭虚拟机$ vagrant reload     ...