HTML 5除了提供用于获取文件信息的File对象外，还添加了FileSystem相关的应用接口。FileSystem对于不同的处理功能做了细致的分类，如用于文件读取和处理的FileReader和FileList对象、用于创建和写入的Blob和FileWriter对象、用于目录和文件系统访问的DirectoryReader和LocalFileSystem对象等，FileSystem功能的出现是浏览器在文件系统上的突破，具有里程碑的意义，虽然目前还尚未完全成熟，但足以让开发者发挥更大的想象空间。

1．FileReader对象

FileReader对象专门用于读取文件，同时可以将文件转化为各种格式信息。使用FileReader对象非常简单，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相同。单击“选择文件”按钮，选中本地图片，此时“选择文件”按钮下方出现对应选中图片的内容，效果如图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中的FileSystem接口的更多相关文章

  1. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）

    最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...

  2. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（六）媒体查询

    响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应 ...

  3. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（五）图解通过Fiddler加速开发

    Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图 ...

  4. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（三）DOCTYPE和字符集

    在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HT ...

  5. 当里个当，免费的HTML5连载来了《HTML5网页开发实例详解》连载（一）

    读懂<HTML5网页开发实例详解>这本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信“Flash之我见”中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得 ...

  6. 读懂《HTML5网页开发实例详解》这本书

    你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信<Flash之我见>中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得胜利. ——国际巨头Google.苹果等都 ...

  7. 感谢各位亲们的大力支持，免费的HTML5学习课程《HTML5网页开发实例具体解释》连载已经结束了！

    感谢各位亲们的大力支持,免费的HTML5学习课程<HTML5网页开发实例具体解释>连载已经结束了.  有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习: 当里个当.免费的HTML5连 ...

  8. 免费的HTML5连载来了《HTML5网页开发实例具体解释》连载（六）媒体查询

    响应式设计的还有一个重要技术手段是媒体查询.假设仅仅是简单的设计一个流式布局系统,那么能够保证每一个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这种设计称不上 ...

  9. Cocos2d-x 3.X手游开发实例详解

    Cocos2d-x 3.X手游开发实例详解(最新最简Cocos2d-x手机游戏开发学习方法,以热门游戏2048.卡牌为例,完整再现手游的开发过程,实例丰富,代码完备,Cocos2d-x作者之一林顺和泰 ...

随机推荐

  1. Swift学习笔记三

    协议和扩展 在Objective-C中,协议是很常见也非常重要的一个特性,Swift中也保留了协议,语法略有变化. 用protocol关键字声明一个协议: protocol ExampleProtoc ...

  2. android常见错误-E/AndroidRuntime(13678): java.lang.NoClassDefFoundError:

    08-01 11:09:39.791: E/AndroidRuntime(13678): FATAL EXCEPTION: main 08-01 11:09:39.791: E/AndroidRunt ...

  3. Codeforces Round #250 (Div. 1) B. The Child and Zoo 并查集

    B. The Child and Zoo Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/438/ ...

  4. 图形化OpenGL调试器 BuGLe [转]

    BuGLe 结合图形化的OpenGL调试与选择的过滤器上的OpenGL命令流.调试器可以查看状态.纹理.framebuffers ,着色器,而过滤器允许日志,错误检查,自由相机控制,视频捕捉等. 主页 ...

  5. dubbo-RPC学习（一）自定义配置

    在dubbo的基础上实现异步调用的时候,因为需要支持回调的“重试间隔时间”与“重试次数”等属性.因此,需要扩展dubbo.xsd,需要添加新的属性来支持这种扩展. dubbo 的xsd是基于sprin ...

  6. Ruby on Rails Tutorial 第四章 Rails背后的Ruby 之 其他数据类型(二)

    1.方法 定义如下所示: def string_message(str='') if str.empty? "It's an empty string!" else "T ...

  7. 思科(Cisco)路由器策略路由配置详解

    策略路由是路由优化的常用方法.在做路由牵引时很多情况都要用到策略路由.我刚刚接触思科这东西,对策略路由的配置还不太熟悉,今天终于配好了,记录一下. 网络拓扑 R2的E1\E2口分别与R3的E1\E2口 ...

  8. string2array($value);

    /*** 将字符串转换为数组** @param string $data 字符串* @return array 返回数组格式,如果,data为空,则返回空数组*/if ( !function_exis ...

  9. 乐在其中设计模式(C#) - 单例模式(Singleton Pattern)【转】

    介绍 保证一个类仅有一个实例,并提供一个访问它的全局访问点. 示例 保证一个类仅有一个实例. Singleton using System; using System.Collections.Gene ...

  10. SSIS 学习（1）： 概要【转】

    俗话说:“十年磨一剑”,Microsoft 通过5年时间的精心打造,于2005年浓重推出Sql Server 2005,这是自SQL Server 2000 以 后的又一旷世之作.这套企业级的数据库解 ...