（3）HTML5 文件操作API

读取目录内容

要读取目录的内容，可先创建 DirectoryReader，然后调用 readEntries() 方法。

我们不能保证所有目录条目都能在仅调用一次 readEntries() 的情况下同时返回。

也就是说，您需要一直调用 DirectoryReader.readEntries()，直到系统不再返回结果为止。以下代码对此作了说明：

1. <ul id="filelist"></ul>
2. function toArray(list) {
3. return Array.prototype.slice.call(list || [], 0);
4. }
5. function listResults(entries) {
6. // Document fragments can improve performance since they‘re only appended
7. // to the DOM once. Only one browser reflow occurs.
8. var fragment = document.createDocumentFragment();
9. entries.forEach(function(entry, i) {
10. var img = entry.isDirectory ? ‘<img src="folder-icon.gif">‘ :
11. ‘<img src="file-icon.gif">‘;
12. var li = document.createElement(‘li‘);
13. li.innerHTML = [img, ‘<span>‘, entry.name, ‘</span>‘].join(‘‘);
14. fragment.appendChild(li);
15. });
16. document.querySelector(‘#filelist‘).appendChild(fragment);
17. }
18. function onInitFs(fs) {
19. var dirReader = fs.root.createReader();
20. var entries = [];
21. // Call the reader.readEntries() until no more results are returned.
22. var readEntries = function() {
23. dirReader.readEntries (function(results) {
24. if (!results.length) {
25. listResults(entries.sort());
26. } else {
27. entries = entries.concat(toArray(results));
28. readEntries();
29. }
30. }, errorHandler);
31. };
32. readEntries(); // Start reading dirs.
33. }
34. window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);

删除目录

DirectoryEntry.remove() 方法的行为与 FileEntry 相应方法的行为非常相似。差别在于：尝试删除非空目录时会引发错误。

以下代码会从“/music/genres/”删除空的“jazz”目录：

1. window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
2. fs.root.getDirectory(‘music/genres/jazz‘, {}, function(dirEntry) {
3. dirEntry.remove(function() {
4. console.log(‘Directory removed.‘);
5. }, errorHandler);
6. }, errorHandler);
7. }, errorHandler);

以递归方式删除目录

如果您不需要某个包含条目的目录，不妨使用 removeRecursively()。该方法将以递归方式删除目录及其内容。

以下代码会以递归方式删除“music”目录及其包含的所有文件和目录：

1. window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
2. fs.root.getDirectory(‘/misc/../music‘, {}, function(dirEntry) {
3. dirEntry.removeRecursively(function() {
4. console.log(‘Directory removed.‘);
5. }, errorHandler);
6. }, errorHandler);
7. }, errorHandler);

复制、重命名和移动

FileEntry 和 DirectoryEntry 享有共同的操作。

复制条目

FileEntry 和 DirectoryEntry 均可使用 copyTo() 复制现有条目。该方法会自动以递归方式复制文件夹。

以下代码示例会将“me.png”文件从一个目录复制到另一个目录：

1. function copy(cwd, src, dest) {
2. cwd.getFile(src, {}, function(fileEntry) {
3. cwd.getDirectory(dest, {}, function(dirEntry) {
4. fileEntry.copyTo(dirEntry);
5. }, errorHandler);
6. }, errorHandler);
7. }
8. window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
9. copy(fs.root, ‘/folder1/me.png‘, ‘folder2/mypics/‘);
10. }, errorHandler);

移动或重命名条目

FileEntry 和 DirectoryEntry 的 moveTo() 方法可让您移动或重命名文件或目录。

其第一个参数是文件要移动到的目标父目录，其第二个参数是文件可选的新名称。如未提供新名称，系统将使用文件的原名称。

以下示例将“me.png”重命名为“you.png”，但并不移动该文件：

1. function rename(cwd, src, newName) {
2. cwd.getFile(src, {}, function(fileEntry) {
3. fileEntry.moveTo(cwd, newName);
4. }, errorHandler);
5. }
6. window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
7. rename(fs.root, ‘me.png‘, ‘you.png‘);
8. }, errorHandler);
9. 以下示例将“me.png”（位于根目录中）移动到名为“newfolder”的文件夹。
10. function move(src, dirName) {
11. fs.root.getFile(src, {}, function(fileEntry) {
12. fs.root.getDirectory(dirName, {}, function(dirEntry) {
13. fileEntry.moveTo(dirEntry);
14. }, errorHandler);
15. }, errorHandler);
16. }
17. window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
18. move(‘/me.png‘, ‘newfolder/‘);
19. }, errorHandler);

filesystem: 网址

FileSystem API 使用新的网址机制，（即 filesystem:），可用于填充 src 或 href 属性。例如，如果您要显示某幅图片且拥有相应的 fileEntry，您可以调用 toURL() 获取该文件的 filesystem: 网址：

1. var img = document.createElement(‘img‘);
2. img.src = fileEntry.toURL(); // filesystem:http://example.com/temporary/myfile.png
3. document.body.appendChild(img);

另外，如果您已具备 filesystem: 网址，可使用 resolveLocalFileSystemURL() 找回 fileEntry：

1. window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL ||
2. window.webkitResolveLocalFileSystemURL;
3. var url = ‘filesystem:http://example.com/temporary/myfile.png‘;
4. window.resolveLocalFileSystemURL(url, function(fileEntry) {
5. ...
6. });

支持的浏览器：

Opera仅支持FileAPI  IE不支持   Safari不支持   Firefox仅支持FileAPI   Chrome/Chromium浏览器支持。