html5的file api以及配合spark-md5获取文件md5值
2017-07-21 15:51
716 查看
引入spark-md的js库
<script src="<%=request.getContextPath()%>/components/spark-md5/spark-md5.js"></script
添加上传控件和测试按钮
js方法
$("#btnFile").click(function(){
var dom = document.getElementById("uploadFile");
processFiles(dom.files);
})
使用 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
<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
相关文章推荐
- 基于js-spark-md5前端js类库,快速获取文件Md5值
- 基于js-spark-md5前端js类库,快速获取文件Md5值
- Android Studio生成签名文件,自动签名,以及获取SHA1和MD5值
- Properties获取文件内容以及和ibatis配合
- Android 获取文件以及文件夹MD5,用来做游戏程序的动态更新
- MD5工具类,提供字符串MD5加密(校验)、文件MD5值获取(校验)功能
- nginx获取大文件MD5值(nginx模块ngx_file_md5)
- Android Studio生成签名文件,自动签名,以及获取SHA1和MD5值
- MD5工具类,提供字符串MD5加密、文件MD5值获取(校验)功能
- 安卓学习笔记---Android Studio生成签名文件,自动签名,以及获取SHA1和MD5值
- Android Studio生成签名文件,自动签名,以及获取SHA1和MD5值
- MD5工具类,提供字符串MD5加密(校验)、文件MD5值获取(校验)功能
- Macbook下获取文件MD5以及SHA-1值的命令
- Spark-MD5 JS获取文件MD5
- Spark-MD5获取文件MD5的使用
- 用c 获取文件MD5值的实现方法
- iOS上获取大文件md5的方法
- 在php.ini中设置表单上传文件的大小,以及获取设置的值的方法 .
- c#获取文件md5值--可用于p2p的文件验证
- C#获取文件MD5值方法