html如何读取文件里的内容,读取文件里的内容《 HTML5：文件系统 》

往文件里面写内容的时候，会触发一些事件，使用这些事件的对应的处理器，我们可以去做一些事情 ... 开始写的时候，会执行 onwritestart，写入成功以后，会执行 onwrite ... 写入结束以后不管成功还是失败，都会去执行 onwriteend ...

下面在成功写入内容到文件以后，去做点事情，可以去读取写入内容以后的文件里面的内容 ...

在文件系统里，代表文件的东西叫做 FileEntry ... 调用它的 file 方法，可以返回一个表示当前状态的文件对象 ... 然后我们去新建一个文件的阅读器，读取这个文件对象里的内容。

关于读取文件的方法，可以参数宁皓网的 文件 API 这个课程 ...

代码

我们先去设置一下 文件写入器的 onwrite 处理器 ... 在写入内容完成以后，调用 FileEntry 的 file 方法 ... 这个方法有两个参数，成功要执行的函数，还有失败要执行的函数 ...

成功的话，会返回一个 file 文件对象 ... 把它传递给这个函数 .. 在这个函数里，我们先去新建一个文件阅读器 ... 给它一个名字 ... 叫作 reader ...

再去调用阅读文件的方法，这里我们用 readAsText ... 用文本的形式读取文件 ...

再设置一下读取文件成功以后的处理器 ... 在成功以后返回一个对象 ... 我们叫它 event ... 再把它传递给这个函数 ...

这个对象的 target .... result 属性里面，会包含文件里的内容 ....

我们可以把它输出到浏览器的控制台上 ...

/* 写入内容到 data.txt */

fileSystem.root.getFile('data.txt',

{create: false, exclusive: false},

function (fileEntry) {

fileEntry.createWriter(function (fileWriter) {

var blob = new Blob(['地心引力'], {type: 'text/plain'});

fileWriter.write(blob);

console.log('写入内容成功！');

/* 写入完成以后读取文件里的内容 */

fileWriter.onwrite = function (event) {

fileEntry.file(function (file) {

var reader = new FileReader();

reader.readAsText(file);

reader.onload = function (event) {

console.log(event.target.result);

};

}, onError);

};

}, onError);

}, onError);

预览

保存一下文件 ... 回到浏览器 ... 刷新 ..

在控制台上会输出 data.txt 这个文件里面的内容 ....