HTML5之FileReader的简易使用
用来把文件读入内存,并且读取文件中的数据。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效果展示
HTML5之FileReader的简易使用的更多相关文章
- 网站开发进阶(三十二)HTML5之FileReader的使用
HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型 ...
- HTML5 之 FileReader 方法上传并读取文件
原文地址:https://caochangkui.github.io/file-upload/ HTML5 的 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据 ...
- HTML5 之 FileReader 的使用 (二) (网页上图片拖拽并且预显示可在这里学到) [转载]
转载至 : http://www.360doc.com/content/14/0214/18/1457948_352511645.shtml FileReader 资料(英文): https://de ...
- HTML5之FileReader的使用
HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...
- html5使用FileReader上传图片
客户端代码是网上找的,修改为.net代码. <html><head> <meta charset="utf-8"> <titl ...
- HTML5 使用FileReader实现调用相册、拍照功能
HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...
- HTML5 通过 FileReader 实现文件上传
概述 在页面中上传时,之前一般都是需要使用form表单进行上传.html5 中提供了FileReader 可以将文件转换成Base64编码字符串,因此就可以直接使用 AJAX实现文件上传. 实现代码 ...
- [转] HTML5之FileReader的使用
HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...
- HTML5之FileReader的使用.RP
HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...
随机推荐
- 云计算之路-阿里云上:Web服务器请求到达量突降
今天下午遇到了自使用阿里云以来首次遇到的新情况——http.sys的ArrivalRate突降(说明请求到达IIS的请求数量少了),而且SLB中的3台ECS都出现了这个问题. 1. 10.161.24 ...
- 关于ArrayList add()方法 中的引用问题
ArrayList的add方法每次添加一个对象时,添加 的是一个对象的引用,比如进行循环操作10次 lists.add(a) 每次 a会改变 ,这时候你会发现你在lists里添加了10个相同的对象a ...
- Vue学习(三):数据绑定语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python3.x 编码问题
- cocos2d-x 中菜单类
菜单相关类包含:菜单类和菜单项类,菜单类图,从类图可见Menu类继承于Layer. 菜单项类图,从图中可见所有的菜单项都是从BaseMenuItem继承而来的,BaseMenuItem是抽象类,具体使 ...
- DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- 问题 E: 完数与盈数
问题 E: 完数与盈数 时间限制: 1 Sec 内存限制: 32 MB提交: 73 解决: 69[提交][状态][讨论版][命题人:外部导入] 题目描述 一个数如果恰好等于它的各因子(该数本身除外 ...
- Leetcode 684.冗余连接
冗余连接 在本问题中, 树指的是一个连通且无环的无向图. 输入一个图,该图由一个有着N个节点 (节点值不重复1, 2, ..., N) 的树及一条附加的边构成.附加的边的两个顶点包含在1到N中间,这条 ...
- Python 3 学习笔记之——数据类型
1. 数字 类型 int, float, bool, complex type() 查看变量类型 isinstance(a, int) 查看变量类型 运算符 % 取余 // 返回商的整数部分 ** 幂 ...
- beta版本冲刺五
目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:恺琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...