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. SRM 581 D2 L2：SurveillanceSystem，重叠度

    题目来源:http://community.topcoder.com/stat?c=problem_statement&pm=12588 在判断 ‘+’ 的时候使用了 重叠度 的概念,跟一般的 ...

  2. PL/SQL连接oracle数据库

    PL/SQL连接oracle数据库 1.简单介绍 在不安装oracle数据库的情况下使用pl/sql连接远程oracle数据库. 2.详细步骤: a)      安装PL/SQL.依据自己的操作系统安 ...

  3. vue+webpack一些知识

    使用mac的用户需要获取权限才可以使用npm install指令 设置node目录的权限指令 sudo chmod -R 777 /usr/local/lib/node_modules/ 大家都知道国 ...

  4. html系列教程--标题，水平线，注释以及段落

    HTML标题 标题,用来显示文章重要性的文字,包含了文章的主旨,类似于作文题目. 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的,由大到小一次排列,h1 ...

  5. WindowsService服务的C#实现

    WindowsService(简称服务,下同)是目前做客户端软件后台运行功能的非常好的选择,本文基本解决了服务的创建和编写,代码控制服务的安装.卸载.启动.停止等,为服务传递参数,其他注意事项等 1. ...

  6. bat文件自动编译InnoSetup脚本

    今天想制作一个bat文件,打包多个innosetup脚本,参考链接:http://www.cnblogs.com/joean/p/4870428.html 流程: 新建文本文档,将.txt改为.bat ...

  7. jQuery EasyUI combobox多选和赋值

    定义select <select id="ID" name=empVO.acunid class="easyui-combobox" required=& ...

  8. 不要伤害指针（5）--void和void指针详解

    原文转载地址:http://blog.csdn.net/sunchaoenter/article/details/6587426 增加自己的想法,作为笔记. 1.概述 许多初学者对C/C++语言中的v ...

  9. Programming C#.Inheritance and Polymorphism

    继承 C#中,创建派生类要在派生类的名字后面加上冒号,后面再跟上基类的名字: public class ListBox : Control 提示:C++程序员注意了,C#没有私有或者保护继承 多态 继 ...

  10. 学习python 一些错误记录

    1. TypeError: 'unicode' object is not callable当遇到这样的错误时候, 一般是属性当做方法调用了,比如,selenium 脚本, driver.title ...