html5的file api以及配合spark-md5获取文件md5值

引入spark-md的js库

<script src="<%=request.getContextPath()%>/components/spark-md5/spark-md5.js"></script

添加上传控件和测试按钮

<div><input type="file" id="uploadFile"></input></div><div><input type="button" id="btnFile" value="测试"></input></div>

js方法

$("#btnFile").click(function(){var dom = document.getElementById("uploadFile"); processFiles(dom.files);})

function processFiles(files) {    var file = files[0];         var reader = new FileReader();    reader.onload = function (e) {      // 这个事件发生，意为着数据准备好了      alert(SparkMD5.hashBinary(e.target.result));    };    //reader.readAsText(file);    //reader.readAsArrayBuffer(file);    //reader.readAsDataURL(file);    reader.readAsBinaryString(file)  }

使用 type 属性为 file 的 <input> 元素，就能得到一个标准的上传文件框。除了能在<form>元素中将文件发送给Web服务器外，这个<input>也有自己处理文件的方式。

1，选择文件后，我们可以获取其中的文件对象属性

每个文件对象都有三个有用的属性：

   name：保存文件名（不包含路径）

   size：文件的字节大小

   type：保存文件的MIME类型

可以分别读取这三个属性，然后加入判断。比如拒绝处理超过一定大小的文件，或者只允许某种类型的文件。

2，创建FileReader对象，处理文件

通过调用 FileReader 的方法可以提取文件内容。其提供的方法有：

   readAsText()：把文件内容转换成一个长字符串，这个方法只能处理包含文本内容（而不是二进制内容）的文件。（像txt、html、xml、csv等格式文件都可以）

   readAsBinaryString()：让应用处理二进制编码的数据，但基本上就是把数据保存到一个文本字符串中，效率不高。

   readAsArrayBuffer()：将数据读到一个数组中，每个数组项代表一个字节。其优势是可以用来创建Blob对象，然后切分成更小的二进制数据块，以便逐块处理。

   readAsDataURL()：能让我们方便地取得图片数据。

原文出自：www.hangge.com  转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1067.html