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. #include <assert.h>

    assert宏 适用于软件测试.调试.排错 被除数不能为0,assert可以用于检测被除数是否为0 #define _CRT_SECURE_NO_WARNINGS //#define NDEBUG// ...

  2. 测试中的代码分享~将可以合并的方法去合并Func不赖

    在面向对象的设计中,我们经常会谈到“重构”,而重构之中有个叫合并方法的,就是将多个方法干的事类似,或者说,方法体的长向很像,那么,我们需要去考虑,将它们进行抽象! 原来的代码: /// <sum ...

  3. C#中使用日志类，添加dll时出现错误

    警告 1 未能解析引用的程序集 “log4net, Version=1.2.10.0, Culture=neutral, PublicKeyToken=1b44e1d426115821, proces ...

  4. easyui的验证

    加一个JS来重写验证,文件名为:validator.js 内容为: //扩展easyui表单的验证 $.extend($.fn.validatebox.defaults.rules, { //验证汉子 ...

  5. bootstrap注意事项（五）表单

    1.基本实例 单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control类的 <input>.<textarea> 和 <select> 元素都 ...

  6. 状态压缩DP------学习小记

    状态DP主要用的还是DP思想,顾名思义,加了一个状态,主要是用来求状态个数的. 状态是用二进制数来表示的,也就是用0或1来表示,每一行有一个状态数,就是由这一行的0或1组成的,首先我们要获得每行的状态 ...

  7. HDU 2685 I won't tell you this is about number theory

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2685 题意:求gcd(a^m - 1, a^n - 1) mod k 思路:gcd(a^m - 1, ...

  8. Java学习之finally关键字总结

    Java中的final关键字非常重要,它可以应用于类.方法以及变量.这篇文章中我将带你看看什么是final关键字?将变量,方法和类声明为final代表了什么?使用final的好处是什么?最后也有一些使 ...

  9. 解决ie6里png图片透明变白色bug

    加入这段js就行了. function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. { var a ...

  10. git/github 笔记

    2016-1-9 创建github repos并提交修改 在[这里](https://github.com/new)创建一个repos, 进入终端,cd到一个目录下,这个目录用来放等下clone的工程 ...