wbjs--新api -- FileReader
来源:互联网 发布:mooc网络公开课网站 编辑:程序博客网 时间:2024/04/30 09:00
FileReader接口的方法
方法名 参数 描述
readAsBinaryString file 将文件读取为二进制编码
readAsText file,[encoding] 将文件读取为文本
readAsDataURL file 将文件读取为DataURL
abort (none) 终端读取操作
2、FileReader接口事件
FileReader接口包含了一套完整的事件模型,用于捕获读取文件时的状态。
FileReader接口的事件
事件 描述
onabort 中断
onerror 出错
onloadstart 开始
onprogress 正在读取
onload 成功读取
方法名 参数 描述
readAsBinaryString file 将文件读取为二进制编码
readAsText file,[encoding] 将文件读取为文本
readAsDataURL file 将文件读取为DataURL
abort (none) 终端读取操作
2、FileReader接口事件
FileReader接口包含了一套完整的事件模型,用于捕获读取文件时的状态。
FileReader接口的事件
事件 描述
onabort 中断
onerror 出错
onloadstart 开始
onprogress 正在读取
onload 成功读取
onloadend 读取完成,无论成功失败
<html><head><meta charset="utf-8"/><title>File API Test</title></head><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> <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); //////readAsDataURL
,这个api能够把二进制图片内容转成base64的格式 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></html>
阅读全文
0 0
- wbjs--新api -- FileReader
- FileReader文件读取API
- HTML5文件上传FileReader API
- HTML5新特性:FileReader 和 FormData
- Web API接口 FileReader学习笔记
- FileReader
- FileReader
- FileReader
- 拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
- Linux 新api eventfd
- Linux 新api eventfd
- Linux 新api eventfd
- iOS5 新API 特性
- HTML5新API
- HTML5新API学习
- Linux 新api eventfd
- HTML5新的API
- swift GCD新API
- iOS10以后 IDFA获取不了解决方案
- namespace 理解
- The Languages and Frameworks You Should Learn in 2017
- 阅读笔记:自动发现,关系估计,学习上千个类别的语义属性,扩展zero-shot learning
- Oracle11 g数据库过期
- wbjs--新api -- FileReader
- JSON.parse(JSON.stringify())
- 解决 ORDER BY expressions must appear in select list
- 6.6模拟题 维修店(1791)
- android全屏/沉浸式状态栏下,各种键盘挡住输入框解决办法
- Java序列化
- http的get、post请求
- opencc 安装
- mkString 链接空的list的map 链接字符不会出现 返回 “”