免费的HTML5连载来了《HTML5网页开发实例具体解释》连载(四)HTML5中的FileSystem接口...
HTML 5除了提供用于获取文件信息的File对象外,还加入了FileSystem相关的应用接口。
FileSystem对于不同的处理功能做了仔细的分类,如用于文件读取和处理的FileReader和FileList对象、用于创建和写入的Blob和FileWriter对象、用于文件夹和文件系统訪问的DirectoryReader和LocalFileSystem对象等。FileSystem功能的出现是浏览器在文件系统上的突破,具有里程碑的意义,尽管眼下还尚未全然成熟。但足以让开发人员发挥更大的想象空间。
1.FileReader对象
FileReader对象专门用于读取文件。同一时候能够将文件转化为各种格式信息。
使用FileReader对象很easy,FileReader对象实例一共包括4个方法,如表2.8所看到的。
表2.8 FileReader对象方法
方法名称 |
说明 |
readAsBinaryString |
将文件读取为二进制码 |
readAsDataURL |
将文件读取为DataURL,一段是以data:开头的字符串 |
readAsText |
将文件读取为文本,第2个參数为编码类型,默觉得UTF-8 |
abort |
中断读取 |
以下通过演示样例展现FileReader对象中readAsDataURL方法的使用。代码例如以下:
<!DOCTYPE html>
<html>
<body><input type="file" id="input"><br> <!-- 文件选择控件 --><img id="img"/> <!-- 图片展示 -->
</body>
<script type="text/javascript">document.getElementById("input").addEventListener("change", function () {// 监听选择控件change事件var fileReader = new FileReader(); // 新建FileReader对象实例fileReader.onloadend = function(e) { // 监听实例loadend事件document.getElementById("img").src = e.target.result; // 设置图片base64值};fileReader.readAsDataURL(this.files[0]); // 读取文件内容}, false);
</script>
</html>
提示:本节FileSystem的演示样例代码均在Chrome 28下測试通过。
演示样例打开执行效果与图2.19同样。单击“选择文件”button。选中本地图片,此时“选择文件”button下方出现相应选中图片的内容,效果如图2.21所看到的。
图2.21 FileReader对象readAsDataURL方法使用
演示样例中,当用户选中图片时。触发input元素的change事件。在回调事件中新建一个FileReader对象的实例用于读取图片文件内容。被读取的图片文件返回格式例如以下:
data:[<MIME-type>][;charset=<encoding>][;base64],<data>
图片被转化为DataURL数据,即Base64格式数据。该数据能够被赋予图片元素的src属性获得并显示。
提示:Base64数据格式的说明能够參考网址http://en.wikipedia.org/wiki/Data_URI_scheme。
FileReader作为FileSystem中的一部分。通经常使用于文件读取。能够结合上传文件场景使用。
想了解FileSystem中其它的部分语法和演示样例,来本书看看吧。
学习HTML5最好的书就是《HTML5网页开发实例具体解释》,用代码学习用案例学习,可比看文字有趣多了!
!
!
一本书搞定HTML5,从如今開始。
免费的HTML5连载来了《HTML5网页开发实例具体解释》连载(四)HTML5中的FileSystem接口...相关推荐
- 《HTML5网页开发实例详解》连载(四)HTML5中的FileSystem接口
HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...
- 微信公众号网页开发:播放视频,在列表中滑动会脱离文档流
项目场景: antd移动端端开发 微信公众号移动端网页开发 问题描述: video-react有问题,在跑马灯中第一次白屏,在列表中滑动会脱离文档流 原因分析: 未知 解决方案: 直接上代码 < ...
- 自编网页是处理url时服务器出错,【上海校区】自编教材《web标准网页制作实例教程》连载...
1.1.HTML常用标签 HTML标签虽然有很多,但并不是都经常用到.下面我们开始先学习一些常用的HTML标签.1.1.1.标题 在前面的学习中,我们看到过在 元素内,有一组标签,这里的就是页面文档文 ...
- jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释...
因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...
- 前端网页开发实例入门
网页实例 1.使用jQuery提高开发效率 1)什么是jQuery jQuery 是一个 JavaScript 库,是一个"写的更少,但做的更多"的轻量级 JavaScript 库 ...
- 模拟太阳系的html,纯HTML5制作的震撼太阳系网页
[实例简介] 纯HTML5制作的震撼太阳系网页 [实例截图] [核心代码] 6a3d6d76-5d53-4cf0-b911-ce38392529fd └── 太阳系 ├── css │ └── s ...
- 013、静态网页开发
1.版心 阅读报纸时我们会发现,虽然其中内容很多很丰富,但是经过合理的排版布局,版面整体依然清晰.易读. 同样,在制作网页过程中,如果要让页面结构清晰.有条理,也需要对网页内容进行"排版&q ...
- 快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力
为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间.不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML5,Bootstrap和CSS3中的免费网页模板资源.鉴于网站模板 ...
- HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)
HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript) 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端大气上档次的表白网页吧 尽管没有深情的告白, ...
最新文章
- 黑马程序员--网络编程
- 如何安装python3_linux如何安装python3
- android模拟器太卡,安卓模拟器安装之后太卡怎么解决
- 在星辰世界的guandan
- mysql查询数据库报错sql_mode_MySQL数据库的sql_mode
- MySQL教程(二)—— 关于在ACCESS中使用SQL语句
- Pikachu实验重现2(Sql的注入)
- Android Binder机制简单了解
- Web系统Login拦截器
- SpringBoot31 整合SpringJDBC、整合MyBatis、利用AOP实现多数据源
- 用Java 语言实现正整数的质因数分解
- input输入框添加键盘事件
- [转载] 胡锡进:5000亿买一包爆米花 我不想让我的国家这样
- 计算机原理作文,海口经济技术学院微型计算机原理作业第三章 习题与思考题:自述作文...
- MEC与C-V2X融合应用场景白皮书
- 桌面图标全部成被选中状态解决办法
- cube的意思中文翻译_cube是什么意思_cube的翻译_音标_读音_用法_例句_爱词霸在线词典...
- 宝塔解压文件,通过SSH命令解压缩.tar.gz、.gz、.zip文件的方法
- 南开1809计算机应用基础在线作业,【奥鹏】南开21春学期(1709、1803、1809、1903、1909、2003、2009、2103)《计算机应用基础》在线作业1...
- Boost::Asio::Error的用法浅析
热门文章
- 自考计算机科学与技术本科毕业论文选题,自考计算机科学与技术专业(本)毕业论文写作指导...
- 北斗导航 | 卫星导航基础知识(坐标系)
- Qt学习(二):菜单栏、工具栏和对话框
- 数据结构学习笔记(七):哈希表(Hash Table)
- android air创建文件夹,安卓版Airdrop将上线:无需安装APP,轻松实现文件隔空投送...
- 为什么你应该尝试全栈
- 使用GDI+实现圆形进度条控件的平滑效果
- 5ic计算机考试考卷读取错误,最新计算机一级试题第五套
- 怎么在页面中使用mixins_模压化粪池使用过程中怎么管理?
- 英语语法---介词短语详解