码迷，mamicode.com
首页 > Windows程序 > 详细

（3）HTML5 文件操作API

时间：2015-12-20 16:01:08      阅读：240      评论：0      收藏：0      [点我收藏+]

标签：

读取目录内容

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

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

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

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

以递归方式删除目录

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

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

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

复制、重命名和移动

FileEntry 和 DirectoryEntry 享有共同的操作。

复制条目

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

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

  1. function copy(cwd, src, dest) {  
  2.   cwd.getFile(src, {}, function(fileEntry) {  
  3.   
  4.     cwd.getDirectory(dest, {}, function(dirEntry) {  
  5.       fileEntry.copyTo(dirEntry);  
  6.     }, errorHandler);  
  7.   
  8.   }, errorHandler);  
  9. }  
  10.   
  11. window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {  
  12.   copy(fs.root, ‘/folder1/me.png‘, ‘folder2/mypics/‘);  
  13. }, 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.   
  7. window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {  
  8.   rename(fs.root, ‘me.png‘, ‘you.png‘);  
  9. }, errorHandler);  
  10.   
  11. 以下示例将“me.png”（位于根目录中）移动到名为“newfolder”的文件夹。  
  12.   
  13. function move(src, dirName) {  
  14.   fs.root.getFile(src, {}, function(fileEntry) {  
  15.   
  16.     fs.root.getDirectory(dirName, {}, function(dirEntry) {  
  17.       fileEntry.moveTo(dirEntry);  
  18.     }, errorHandler);  
  19.   
  20.   }, errorHandler);  
  21. }  
  22.   
  23. window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {  
  24.   move(‘/me.png‘, ‘newfolder/‘);  
  25. }, 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.   
  4. var url = ‘filesystem:http://example.com/temporary/myfile.png‘;  
  5. window.resolveLocalFileSystemURL(url, function(fileEntry) {  
  6.   ...  
  7. });  

支持的浏览器：

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

（3）HTML5 文件操作API

标签：

原文地址：http://www.cnblogs.com/zhaoq/p/5060953.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！