引入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