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. 关于nodejs，request模块的一个bug

    今天在使用request时发生了一个错误, 对方网站的证书设置的不正确导致本地请求不能返回数据: 解决方案是在配置request时加入一个忽略证书验证得字段: 具体代码如下 request.post( ...

  2. 在magento中使用正则式

    $sqlCondition = "IFNULL(_table_name.value, _table_name_default.value) REGEXP '^[^a-zA-Z]'" ...

  3. andengine游戏引擎总结进阶篇1

    本篇包括虚拟键盘,粒子系统 1虚拟键盘 分为两种,一种是单个虚拟键盘,另一种是多个方位虚拟键盘 1)加载虚拟键盘所需要的图片资源 private BitmapTextureAtlas mOnScree ...

  4. protobuf使用错误总结

    1>HelloWorldScene.obj : error LNK2019: 无法解析的外部符号 "public: virtual __thiscall LoginReqMessage ...

  5. 第六章SignalR的服务器广播

    第六章SignalR的服务器广播 1.概述: VS可以通过 Microsoft.AspNet.SignalR.Sample NuGet包来安装一个简单的模拟股票行情应用.在本教程的第一部分,您将从头开 ...

  6. 2014.12.06 ASP.NET 三级联动，添加员工，修改员工

    (一)三级联动 要实现的效果: 代码: MyDBDataContext context = new MyDBDataContext(); protected void Page_Load(object ...

  7. SqlServer之表变量和临时表

    表变量: 表变量创建的语法类似于临时表,区别就在于创建的时候,必须要为之命名.表变量是变量的一种, 表变量也分为本地及全局的两种,本地表变量的名称都是以"@"为前缀,只有在本地当前 ...

  8. OCP prepare 20140703

    1. trim trim('aaa' from 'aaabbbccc') 这个是错误的.ora-30001: trim set should have only one character 2. in ...

  9. mantis 中文统计报表乱码问题解决办法

    mantis 中文报表乱码问题 1.安装mantisTB 1.2.17:a.安装插件:管理-->插件管理-->安装MantisGraph(Mantis图表 1.0) 插件b.修改配置文件: ...

  10. EBS R12 怎么修改APPS密码

    apps 和 applsys 的口令 $> FNDCPASS apps/<apps password> 0 Y system/<system password> SYST ...