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 ...