HTML5之FileReader小结
2024-09-07 05:53:47
方法:
方法名 | 参数 | 描述 |
abort | none | 中断读取 |
readAsBinaryString | file | 将文件读取为二进制码 |
readAsDataURL | file | 将文件读取为 DataURL |
readAsText | file, [encoding] | 将文件读取为文本 |
readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。
readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
FileReader 包含了一套完整的事件模型,用于捕获读取文件时的状态,下面这个表格归纳了这些事件:
事件 | 描述 |
onabort | 中断时触发 |
onerror | 出错时触发 |
onload | 文件读取成功完成时触发 |
onloadend | 读取完成触发,无论成功或失败 |
onloadstart | 读取开始时触发 |
onprogress | 读取中 |
文件一旦开始读取,无论成功或失败,实例的 result 属性都会被填充。如果读取失败,则 result 的值为 null ,否则即是读取的结果,绝大多数的程序都会在成功读取文件的时候,抓取这个值(this.result)。
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Test</title>
</head>
<script type="text/javascript">
var result = document.getElementById("result");
var file = document.getElementById("file"); //判断浏览器是否支持FileReader接口
if (typeof FileReader == 'undefined') {
result.InnerHTML = "<p>你的浏览器不支持FileReader接口!</p>";
//使选择控件不可操作
file.setAttribute("disabled", "disabled");
} function readAsDataURL() {
//检验是否为图像文件
var file = document.getElementById("file").files[0];
if (!/image\/\w+/.test(file.type)) {
alert("看清楚,这个需要图片!");
return false;
}
var reader = new FileReader();
//将文件以Data URL形式读入页面
reader.readAsDataURL(file);
reader.onload = function (e) {
var result = document.getElementById("result");
//显示文件
result.innerHTML = '<img src="' + this.result + '" alt="" />';
}
} function readAsBinaryString() {
var file = document.getElementById("file").files[0];
var reader = new FileReader();
//将文件以二进制形式读入页面
reader.readAsBinaryString(file);
reader.onload = function (f) {
var result = document.getElementById("result");
//显示文件
result.innerHTML = this.result;
}
} function readAsText() {
var file = document.getElementById("file").files[0];
var reader = new FileReader();
//将文件以文本形式读入页面
reader.readAsText(file);
reader.onload = function (f) {
var result = document.getElementById("result");
//显示文件
result.innerHTML = this.result;
}
}
</script>
<body>
<p>
<label>请选择一个文件:</label>
<input type="file" id="file"/>
<input type="button" value="读取图像" onclick="readAsDataURL()"/>
<input type="button" value="读取二进制数据" onclick="readAsBinaryString()"/>
<input type="button" value="读取文本文件" onclick="readAsText()"/>
</p>
<div id="result" name="result"></div>
</body>
</html>
最新文章
- Servlet,jsp,JSP技术 ,JSP编程
- 使用TFS 自动编译时的一点设置
- php防注入
- Sqoop_ 从 hive 导到mysql常遇九问题总结(转)
- thinkphp空控制器的处理
- TCP/IP协议原理【转载】
- WPF——控件之间的绑定
- 利用ArrayList对Hashtable其进行排序
- Visual Prolog 的 Web 专家系统 (8)
- struts2第一章-基本用法
- html知识点汇总(持续更新中)
- PAT甲级题解(慢慢刷中)
- H5静态资源本地化实践
- vs2017 Mariadb/mysql之旅
- oracle 操作,偶尔记一下
- 钻牛角尖还是走进死胡同--shell脚本根据名称获得 dubbo 服务的 pid
- 2014秋C++ 第9周项目 循环程序设计
- Mac下使用crontab来实现定时任务
- [干货,阅后进BAT不是梦]面试心得与总结---BAT、网易、蘑菇街
- iOS NSError HTTP错误码大全
热门文章
- Ubuntu Navicat链接mysql (9.17第六天)
- 18 —— node 热部署工具 — supervisor /nodemon 。
- 深入理解class
- Intent 显示意图 隐式意图
- Linux command line and shell scripting buble
- 解决fixed布局里内容不滚动问题
- vue实现CheckBox与数组对象绑定
- 使用websocket实现单聊和多聊
- 在Azure Storage 托管HTTP静态网站
- Java IO流操作(III)——File类&案例一:输出制定目录下所有java文件名(包含子目录)&案例二:删除指定的目录(包含子目录)