1、工具的用途：用HTML5 file api读取文件的MD5码。MD5码在文件的唯一性识别上有很重要的应用，业内常用MD5进行文件识别、文件秒传、文件安全性检查等；

2、适用性：IE、Chrome皆兼容；

3、缺陷：当上传大文件时，需要较长的时间才能扫描出MD5码；

4、关于引用：其中引用了js文件（spark-md5.js）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>HTML5 read files hash</title>

    <meta name="author" content="Mofei">

    <meta name="viewport" content="width=device-width; initial-scale=1.0;">

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

</head>

<body>

    <div>

        <header>

            <h1>HTML5 read files hash</h1>

        </header>

        <div>

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

            <div id="box"></div>

        </div>

        <footer>

            <p>&copy; Copyright  by Percy(<a href="http://www.cnblogs.com/Percy_Lee/">www.cnblogs.com/Percy_Lee</a>)</p>

        </footer>

    </div>

    <script type="text/javascript">

     document.getElementById("file").addEventListener("change", function () {

        var fileReader = new FileReader(),

            box = document.getElementById('box'),

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

            file = document.getElementById("file").files[0],

            chunkSize = 2097152,

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

            currentChunk = 0,

            bs = fileReader.readAsBinaryString,

            spark = bs ? new SparkMD5() : new SparkMD5.ArrayBuffer();

        fileReader.onload = function (ee) {

            spark.append(ee.target.result);

            currentChunk++;

            if (currentChunk < chunks) {

                loadNext();

            } else {

                box.innerText = 'MD5:  ' + spark.end();

            }

        }

        function loadNext() {

            var start = currentChunk * chunkSize, end = start + chunkSize >= file.size ? file.size : start + chunkSize;

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

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

        }

        loadNext();

    });

    </script>

</body>

</html>

HTML5 file api读取文件的MD5码工具的更多相关文章

  1. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  2. HTML5的File API读取文件信息

    html结构: <div id="fileImage"></div> <input type="file" value=" ...

  3. File API 读取文件小结

    简单地说,File API只规定怎样从硬盘上提取文件,然后交给在网页中运行的JavaScript代码. 与以往文件上传不一样,File API不是为了向服务器提交文件设计的. 关于File API不能 ...

  4. 使用 JavaScript File API 实现文件上传

    概述 以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScr ...

  5. HTML5 File API — 让前端操作文件变的可能

    前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...

  6. HTML5 File API

    1.File API 一直以来,不能直接访问用户计算机中的文件都是web应用开发当中的一大障碍.File API的宗旨是为web开发人员提供一种安全的方式,以便在客户端访问用户计算机中的文件,并更好的 ...

  7. HTML5 File api 实现断点续传

    目前市场上大多数的网站的断点上传都是需要安装浏览器插件的,本文就针对高级浏览器的环境下,通过HTML5 File api实现断点上传进行说明 一.实现文件多选 HTML5的<input>新 ...

  8. HTML5 File API 全介绍

    在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类 ...

  9. HTML5 File API的应用

    HTML5 File API简介 HTML5File API协议族 Directories and System   文件系统和目录读取 FileWriter   写入文件 FileReader   ...

随机推荐

  1. Spring、Spring自动扫描和管理Bean

    Spring2.5为我们引入了组件自动扫描机制,它可以在类路径下寻找标记了@Component.@Service.@Controller.@Repository注解的类,并把这些类纳入到spring容 ...

  2. CodeForces - 508D Tanya and Password（欧拉通路）

    Description While dad was at work, a little girl Tanya decided to play with dad characters. She has ...

  3. iOS使用sqlite3原生语法进行增删改查以及FMDB的使用

    首先要导入libsqlite3.dylib并且加入头文件#import <sqlite3.h>,在进行增删改查之前还要先把数据库搞进去. 一种方法是从外面拷贝到程序里:http://www ...

  4. 菜鸟学SSH（十八）——Hibernate动态模型+JRebel实现动态创建表

    项目用的是SSH基础框架,当中有一些信息非常相似,但又不尽同样.假设每个建一个实体的话,那样实体会太多.假设分组抽象,然后继承,又不是特别有规律.鉴于这样的情况.就打算让用户自己配置要加入的字段,然后 ...

  5. poj 1064 Cable master ，二分 精度！！！

    给出n根绳子,求把它们分割成K条等长的绳子的最大长度是多少? 二分 用 for(int i=0; i<100; ++i) 取代   while(r-l>eps) 循环100次精度能达到1e ...

  6. Mina入门：mina版之HelloWorld

    一,前言: 在完成上篇文章<Mina入门:Java NIO框架Mina.Netty.Grizzly简介与对比>之后,我们现在可以正式切入Mina入门学习了. 二,搭建项目结构与解决项目依赖 ...

  7. excel中匹配数据

    =VLOOKUP(E6,BC:BD,2,0) E6就是要对应的那一列的一个单元格,BC就是对应的那一列,BD就是要取值的那一列

  8. RabbitMQ安装后启动出错：- unable to connect to epmd on blockstorage: timeout (timed out)

    具体出错信息如下: [root@blockstorage ~]# rabbitmqctl change_password guest RABBIT_PASS Changing password for ...

  9. some knowledge t

    NSNumber static 看下面例子  gCount可以在Person 文件中使用  在main 中不行 @property()括号中可以填的属性 国际化 OC中的快捷键操作 operation ...

  10. IE6下不能定义1px高度的容器和IE6 双边距

        (1)触发的条件---定义一个div,将容器的高度设置成1px (2)  编码得到的结果---在IE6浏览器中,容器的高度不是1px   而是18px (3)出现问题的原因---是因为IE6浏 ...