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

最新推荐文章于 2021-07-04 07:15:24 发布

cqpv77399

最新推荐文章于 2021-07-04 07:15:24 发布

阅读量67

点赞数

文章标签： javascript 人工智能 ViewUI

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方法的使用，代码如下：

[html]view plaincopy 
    
 nbsp;html>   
 <html>   
 <body>   
     <input type="file" id="input"><br>                              <!-- 文件选择控件 --&gt   
     <img id="img"/>                                           <!-- 图片展示 --&gt   
 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对象的实例用于读取图片文件内容，被读取的图片文件返回格式如下：

[html]view plaincopy 
    
 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，从现在开始。

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/14741331/viewspace-1241405/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/14741331/viewspace-1241405/

cqpv77399

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《HTML5网页开发实例详解》连载（四）HTML5中的FileSystem接口

HTML 5除了提供用于获取文件信息的File对象外，还添加了FileSystem相关的应用接口。FileSystem对于不同的处理功能做了细致的分类，如用于文件读取和处理的FileReader和FileList对象、用于...
复制链接

扫一扫