码迷,mamicode.com
首页 > Web开发 > 详细

《HTML5网页开发实例详解》连载(四)HTML5中的FileSystem接口

时间:2014-07-29 17:12:22      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   使用   strong   文件   io   

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所示。

bubuko.com,布布扣

 

图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,从现在开始。

bubuko.com,布布扣

《HTML5网页开发实例详解》连载(四)HTML5中的FileSystem接口,布布扣,bubuko.com

《HTML5网页开发实例详解》连载(四)HTML5中的FileSystem接口

标签:style   blog   http   java   使用   strong   文件   io   

原文地址:http://www.cnblogs.com/book2006/p/3875620.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!