基于 HTML5 FileSystem API 的使用介绍

简介

HTML5 FileSystem API 允许web应用程序访问本地文件系统，从而增强了web应用程序的功能。这个API不需要服务器端的帮助，可以让用户本地文件系统的访问变得十分简单。

HTML5 FileSystem API通过两个对象的集合来实现：FileWriter和FileReader。FileWriter用于向本地文件系统写入文件，而FileReader则用于读取本地文件并返回文件内容。使用这些对象之前，需要获取到FileSystem对象。

获取FileSystem对象

使用FileSystem对象可以让应用程序访问本地文件系统。以下是如何获取FileSystem对象的步骤：

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;

window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, function(fs) {
    console.log('File system opened: ' + fs.name);
}, function(err) {
    console.log(err);
});

在以上代码中，我们使用window.requestFileSystem函数获取FileSystem对象并打开临时文件系统。我们传递了以下3个参数：

1. window.TEMPORARY - 表示使用临时文件系统。
2. 510241024 - 表示文件系统的大小(5MB)。
3. 回调函数 - 文件系统打开成功后的回调函数。

创建文件

创建一个本地文件需要使用FileWriter对象。使用以下代码示例创建一个文件：

function writeFile() {
    window.requestFileSystem(window.TEMPORARY, 5*1024*1024, function(fs) {

        console.log('file system open: ' + fs.name);

        fs.root.getFile('example.txt', {create: true}, function(fileEntry) {

            fileEntry.createWriter(function(fileWriter) {

                fileWriter.onwriteend = function(e) {
                    console.log('Write completed.');
                };

                fileWriter.onerror = function(e) {
                    console.log('Write failed: ' + e.toString());
                };

                // Create a new Blob and write it to log.txt.
                var blob = new Blob(['Hello World'], {type: 'text/plain'});

                fileWriter.write(blob);

            }, errorHandler);

        }, errorHandler);

    }, errorHandler);
}

以上代码将创建一个example.txt的文件，并向其中写入'Hello World'。

读取文件

使用FileReader对象，我们可以轻松的读取本地文件系统中的文件，并返回文件的内容。

function readFile() {
    window.requestFileSystem(window.TEMPORARY, 5*1024*1024, function(fs) {

        console.log('file system open: ' + fs.name);

        fs.root.getFile('example.txt', {}, function(fileEntry) {

            fileEntry.file(function(file) {
                var reader = new FileReader();

                reader.onloadend = function(e) {
                    console.log(this.result);
                };

                reader.readAsText(file);

            }, errorHandler);

        }, errorHandler);

    }, errorHandler);
}

以上代码将读取example.txt中的文件，并以文本形式输出到控制台。

综述

HTML5 FileSystem API为web应用程序提供了访问本地文件系统的能力。通过使用FileWriter和FileReader对象，我们可以很容易的向本地文件系统写入文件和读取文件的内容。