免费的HTML5连载来了《HTML5网页开发实例具体解释》连载（四）HTML5中的FileSystem接口

时间 2019-11-30

标签免费 html5 html 连载网页开发实例具体解释 filesystem 接口栏目 HTML5 繁體版

原文原文链接

HTML 5除了提供用于获取文件信息的File对象外，还加入了FileSystem相关的应用接口。javascript

FileSystem对于不一样的处理功能作了仔细的分类，如用于文件读取和处理的FileReader和FileList对象、用于建立和写入的Blob和FileWriter对象、用于文件夹和文件系统訪问的DirectoryReader和LocalFileSystem对象等。FileSystem功能的出现是浏览器在文件系统上的突破，具备里程碑的意义，尽管眼下还还没有全然成熟。但足以让开发人员发挥更大的想象空间。html

1．FileReader对象java

FileReader对象专门用于读取文件。同一时候可以将文件转化为各类格式信息。浏览器

使用FileReader对象很easy，FileReader对象实例一共包括4个方法，如表2.8所看到的。学习

表2.8 FileReader对象方法this

方法名称编码	说明spa
readAsBinaryStringcode	将文件读取为二进制码htm
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，从现在開始。