20、HTML5 本地文件操作与相关技术应用

HTML5 本地文件操作与相关技术应用

1. 本地文件读取问题与解决方案

在网页开发中，我们常常希望用户能够从本地文件系统读取图像文件，并在网页中进行预览或上传等操作。在 HTML5 之前，用户与本地文件系统的交互主要通过 <input type="file"> 元素实现，但对于网页的 JavaScript 而言，这种功能并不透明，因为网页无法获取所选文件的任何信息，也无法以有意义的方式与之交互。

HTML5 引入了 FileReader API，它允许我们引用本地文件并将其内容直接读取到网页中。要测试浏览器是否支持增强的 FileReader API，可以使用以下特性检测代码：

var history_support = typeof FileReader != "undefined";

获取本地文件引用的方式有多种，例如使用原生的拖放功能（此处不再详细展开），也可以通过让用户在 <input type="file"> 元素中选择文件来获取引用：

<p>Pick an image file:</p>
<input type="file" id="file_selector" />
<script>
var file_selector = document.getElementById("file_selector");
file_selector.addEventL