HTML5之FileReader的简易使用
2024-09-08 01:27:02
用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
1、FileReader接口的方法
FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。
方法名: | 参数: | 描述: |
readAsDataURL | file | 将文件读取为DataURL(一般读取图片) |
readAsText | ile,[encoding] | 将文件读取为文本 |
readAsBinaryString | file | 将文件读取为二进制编码 |
abort | (none) | 终端读取操作 |
2、FileReader接口事件
事件: | 描述: |
onabort | 中断 |
onerror | 出错 |
onloadstart | 开始 |
onprogress | 正在读取 |
onload | 成功读取 |
onloadend | 读取完成,无论成功失败 |
3、FileReader接口的使用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" id="file">
<div id="out"></div>
<img src="" alt="" id="img">
<script>
var file = document.getElementById('file');
var out = document.getElementById('out');//文件展示的1地方
var img = document.getElementById('img');//图片显示的地方 file.onchange = function(event){ //监听文件的改变
var file = event.target.files[0]; //获取到文件的所有信息
console.log(file)
var type = 'defautl'; var reader = new FileReader(); //new一个文件读取的对象(首先要判断你的浏览器是否支持这个方法) //判断文件类型
if(/image/.test(file.type)){ //判断文件的类型
type = 'image' //图片
reader.readAsDataURL(file);
}else{
type = 'text'; //其他非图片文件
reader.readAsText(file);
}
reader.onload = function() { //成功的回调
var html = '';
switch(type){
case "image"://图片的显示
img.src = this.result;
break;
case "text"://文件的显示
html = this.result;
out.innerHTML = html;
break;
} } }
</script>
</body>
</html>
4、FileReader效果展示
最新文章
- Python:list用法
- Docker入门教程(一)介绍
- Qt与VC编程合作起龌龊
- 洛谷 P2670 扫雷游戏==Codevs 5129 扫雷游戏
- spoj 379
- vim自动补全
- Javascript进阶篇——( JavaScript内置对象---下)--Math对象---笔记整理
- 搭建gitbook环境
- 4、Swing在JPanel中添加背景图片方法
- backtrack 使用Tab键补全命令
- LeetCode 40. Combination Sum II (组合的和之二)
- H5单张、多张图片保存续篇
- python中3个连续的单引号是什么意思?&#39;&#39;&#39; ... &#39;&#39;&#39; 这样的引号是什么意思?
- thinkphp自动映射分析
- HDU 5992/nowcoder 207K - Finding Hotels - [KDTree]
- easyui dialog 和 dategrid相关设置与应用
- options.html:1 Refused to load the script &#39;xxxx&#39; because it violates the following Content Security Policy directive: ";script-src &#39;self&#39; blob: filesystem: chrome-extension-resource:";.
- 全源最短路径 - floyd算法 - O(N ^ 3)
- Linux终端复用工具 tmux
- bzoj2875随机数生成器
热门文章
- webpack实践总结
- 了解url
- 目标检测之Faster-RCNN的pytorch代码详解(模型准备篇)
- HDU 3699 A hard Aoshu Problem(暴力枚举)(2010 Asia Fuzhou Regional Contest)
- 学习bash——变量
- Week2 Teamework from Z.XML 软件分析与用户需求调查(五)从对比中看见必应助手发展空间
- lintcode-104-合并k个排序链表
- Bjarne Stroustrup语录2
- docker/qemu中是如何对设备管理的
- [C/C++] extern关键字详解以及与static、const区别