免费的HTML5连载来了《HTML5网页开发实例具体解释》连载(四)HTML5中的FileSystem接口
2015-12-21 15:58
656 查看
HTML 5除了提供用于获取文件信息的File对象外,还加入了FileSystem相关的应用接口。
FileSystem对于不同的处理功能做了仔细的分类,如用于文件读取和处理的FileReader和FileList对象、用于创建和写入的Blob和FileWriter对象、用于文件夹和文件系统訪问的DirectoryReader和LocalFileSystem对象等。FileSystem功能的出现是浏览器在文件系统上的突破,具有里程碑的意义,尽管眼下还尚未全然成熟。但足以让开发人员发挥更大的想象空间。
1.FileReader对象
FileReader对象专门用于读取文件。同一时候能够将文件转化为各种格式信息。
使用FileReader对象很easy,FileReader对象实例一共包括4个方法,如表2.8所看到的。
表2.8 FileReader对象方法
以下通过演示样例展现FileReader对象中readAsDataURL方法的使用。代码例如以下:
提示:本节FileSystem的演示样例代码均在Chrome 28下測试通过。
演示样例打开执行效果与图2.19同样。单击“选择文件”button。选中本地图片,此时“选择文件”button下方出现相应选中图片的内容,效果如图2.21所看到的。
图2.21 FileReader对象readAsDataURL方法使用
演示样例中,当用户选中图片时。触发input元素的change事件。在回调事件中新建一个FileReader对象的实例用于读取图片文件内容。被读取的图片文件返回格式例如以下:
图片被转化为DataURL数据,即Base64格式数据。该数据能够被赋予图片元素的src属性获得并显示。
提示:Base64数据格式的说明能够參考网址http://en.wikipedia.org/wiki/Data_URI_scheme。
FileReader作为FileSystem中的一部分。通经常使用于文件读取。能够结合上传文件场景使用。
想了解FileSystem中其它的部分语法和演示样例,来本书看看吧。
学习HTML5最好的书就是《HTML5网页开发实例具体解释》,用代码学习用案例学习,可比看文字有趣多了!
!
!
一本书搞定HTML5,从如今開始。
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 | 中断读取 |
<!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 onpopstate 事件禁止手机设备上的返回操作
- HTML5的入门与深入理解
- 跨平台移动开发实战(三)------HTML5开发环境搭建
- HTML5获取地理位置
- 历时八年 HTML5标准终于制定完成
- 浅析HTML5的10大优势
- HTML5 地理位置定位(HTML5 Geolocation)原理及应用
- HTML5离线应用无法更新的定位与解决
- html5 本地存储有多少种方案:
- 20个超赞的HTML5网页游戏设计欣赏
- HTML5是什么?
- 如何解决IE6/IE7/IE8浏览器不兼容HTML5新标签的问题
- html5默认input内容清除“×”按钮去除办法
- HTML5的新增标签和废除的标签
- HTML5标签使用的常见误区
- HTML5中Form表单使用方法
- HTML5表单信息验证工作原理
- HTML5的不足
- 为什么学html5?
- HTML5的发展趋势