首页 > Windows开发 > 详细

(2)HTML5 文件操作API

时间:2015-12-20 15:50:58      阅读:270      评论:0      收藏:0      [点我收藏+]
此时,我们会调用 FileEntry 的 createWriter() 方法获取 FileWriter 对象。在成功回调中为error 事件和 writeend 事件设置事件处理程序。
通过以下操作将文字数据写入文件:创建 Blob,向 Blob 附加文字,然后将 Blob 传递到FileWriter.write()向文件附加文字以下代码会将“Hello World”
文字附加到日志文件结尾。
如果该文件不存在,系统将引发错误。
  1. function onInitFs(fs) {  
  2.   
  3.   fs.root.getFile(‘log.txt‘, {create: false}, function(fileEntry) {  
  4.   
  5.     // Create a FileWriter object for our FileEntry (log.txt).  
  6.     fileEntry.createWriter(function(fileWriter) {  
  7.   
  8.       fileWriter.seek(fileWriter.length); // Start write position at EOF.  
  9.   
  10.       // Create a new Blob and write it to log.txt.  
  11.       var bb = new BlobBuilder(); // Note: window.WebKitBlobBuilder in Chrome 12.  
  12.       bb.append(‘Hello World‘);  
  13.       fileWriter.write(bb.getBlob(‘text/plain‘));  
  14.   
  15.     }, errorHandler);  
  16.   
  17.   }, errorHandler);  
  18.   
  19. }  
  20.   
  21. window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);  

复制用户选定的文件

以下代码可让用户使用 <input type="file" multiple /> 选择多个文件,并在应用的沙盒文件系统中复制这些文件。

  1. <input type="file" id="myfile" multiple />  
  2.   
  3. document.querySelector(‘#myfile‘).onchange = function(e) {  
  4.   var files = this.files;  
  5.   
  6.   window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {  
  7.     // Duplicate each file the user selected to the app‘s fs.  
  8.     for (var i = 0, file; file = files[i]; ++i) {  
  9.   
  10.       // Capture current iteration‘s file in local scope for the getFile() callback.  
  11.       (function(f) {  
  12.         fs.root.getFile(file.name, {create: true, exclusive: true}, function(fileEntry) {  
  13.           fileEntry.createWriter(function(fileWriter) {  
  14.             fileWriter.write(f); // Note: write() can take a File or Blob object.  
  15.           }, errorHandler);  
  16.         }, errorHandler);  
  17.       })(file);  
  18.   
  19.     }  
  20.   }, errorHandler);  
  21.   
  22. };  

虽然我们通过输入导入文件,您也可以使用 HTML5 拖放功能轻松实现相同的目标。

正如评论中所说的,FileWriter.write() 可接受 BlobFile。这是因为 File 继承自 Blob,所以文件对象也是 Blob。

删除文件

以下代码会删除“log.txt”文件。

  1. window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {  
  2.   fs.root.getFile(‘log.txt‘, {create: false}, function(fileEntry) {  
  3.   
  4.     fileEntry.remove(function() {  
  5.       console.log(‘File removed.‘);  
  6.     }, errorHandler);  
  7.   
  8.   }, errorHandler);  
  9. }, errorHandler); 

使用目录

沙盒中的目录通过 DirectoryEntry 接口表示,该接口共享了 FileEntry 的大部分属性(继承自常用 Entry 接口)。不过,DirectoryEntry 还可使用其他方法处理目录。

DirectoryEntry 的属性和方法:

  1. dirEntry.isDirectory === true  
  2. // See the section on FileEntry for other inherited properties/methods.  
  3. ...  
  4.   
  5. var dirReader = dirEntry.createReader();  
  6. dirEntry.getFile(path, opt_flags, opt_successCallback, opt_errorCallback);  
  7. dirEntry.getDirectory(path, opt_flags, opt_successCallback, opt_errorCallback);  
  8. dirEntry.removeRecursively(successCallback, opt_errorCallback);  
  9. ...  

创建目录

使用 DirectoryEntrygetDirectory() 方法读取或创建目录。您可以递交名称或路径作为查找或创建所用的目录。

例如,以下代码会在根目录中创建名为“MyPictures”的目录:

  1. window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {  
  2.   fs.root.getDirectory(‘MyPictures‘, {create: true}, function(dirEntry) {  
  3.     ...  
  4.   }, errorHandler);  
  5. }, errorHandler);  

子目录

创建子目录的方法与创建其他任何目录的方法完全相同。不过,如果您尝试创建其直接父目录不存在的目录,

API 将引发错误。相应的解决方法是,依次创建各级目录,而这对异步 API 而言非常麻烦。

以下代码会在系统创建父文件夹后以递归方式添加各个子文件夹,从而在应用相应 FileSystem 的根中创建新的层次结构 (music/genres/jazz)。

  1. var path = ‘music/genres/jazz/‘;  
  2.   
  3. function createDir(rootDirEntry, folders) {  
  4.   // Throw out ‘./‘ or ‘/‘ and move on to prevent something like ‘/foo/.//bar‘.  
  5.   if (folders[0] == ‘.‘ || folders[0] == ‘‘) {  
  6.     folders = folders.slice(1);  
  7.   }  
  8.   rootDirEntry.getDirectory(folders[0], {create: true}, function(dirEntry) {  
  9.     // Recursively add the new subfolder (if we still have another to create).  
  10.     if (folders.length) {  
  11.       createDir(dirEntry, folders.slice(1));  
  12.     }  
  13.   }, errorHandler);  
  14. };  
  15.   
  16. function onInitFs(fs) {  
  17.   createDir(fs.root, path.split(‘/‘)); // fs.root is a DirectoryEntry.  
  18. }  
  19.   
  20. window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);  

在“music/genres/jazz”处于合适的位置后,我们就可以将完整路径传递到 getDirectory(),然后在其下方创建新的子文件夹。例如:

window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
  fs.root.getFile(‘/music/genres/jazz/song.mp3‘, {create: true}, function(fileEntry) {
    ...
  }, errorHandler);
}, errorHandler);

(2)HTML5 文件操作API

原文:http://www.cnblogs.com/zhaoq/p/5060951.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!