• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5文件操作API的代码案例详解

HTML5文件操作API的代码案例详解

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5,API等相关知识,匿名希望在学习及工作中可以帮助到您

简介

我常常想,如果网络应用能够读取和写入文件与目录,将会非常方便。从离线转移到在线后,应用变得更加复杂,而文件系统方面的API的缺乏也一直阻碍着网络前进。存储二进制数据或与其进行交互不应局限于桌面。令人欣慰的是,由于FileSystemAPI的出现,这一现状终于得到了改变。有了FileSystemAPI,网络应用就可以创建、读取、导航用户本地文件系统中的沙盒部分以及向其中写入数据。

API 被分为以下不同的主题:

  • 读取和处理文件:File/Blob、FileList、FileReader

  • 创建和写入:BlobBuilder、FileWriter

  • 目录和文件系统访问:DirectoryReader、FileEntry/DirectoryEntry、LocalFileSystem

浏览器支持与存储限制

在写这篇文章时,只有 GoogleChrome 浏览器可以实施此FileSystemAPI。目前尚不存在专门用于文件/配额管理的浏览器用户界面。要在用户的系统上存储数据,您的应用可能需要请求配额。不过,可使用--unlimited-quota-for-files标记运行Chrome浏览器进行测试。此外,如果您要开发的是用于Chrome网上应用店的应用或扩展程序,可使用unlimitedStorage清单文件权限,而无需请求配额。最后,用户会收到授予、拒绝或为应用增加存储的权限对话框。

如果您要通过 file://调试您的应用,可能需要--allow-file-access-from-files标记。不使用这些标记会导致SECURITY_ERR或QUOTA_EXCEEDED_ERRFileError。

请求文件系统

网络应用可通过调用 window.requestFileSystem()请求对沙盒文件系统的访问权限:

// Note: The file system has been prefixed as of Google Chrome 12:  
window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;  
  
window.requestFileSystem(type, size, successCallback, opt_errorCallback)

type

文件存储是否应该是持久的。可能的值包括window.TEMPORARY和window.PERSISTENT。通过TEMPORARY存储的数据可由浏览器自行决定删除(例如在需要更多空间的情况下)。要清除PERSISTENT存储,必须获得用户或应用的明确授权,并且需要用户向您的应用授予配额。请参阅请求配额。

size

应用需要用于存储的大小(以字节为单位)。

successCallback

文件系统请求成功时调用的回调。其参数为 FileSystem对象。

opt_errorCallback

用于处理错误或获取文件系统的请求遭到拒绝时可选的回调。其参数为FileError对象。

如果您是首次调用requestFileSystem(),系统会为您的应用创建新的存储。请注意,这是沙箱文件系统,也就是说,一个网络应用无法访问另一个应用的文件。这也意味着您无法在用户硬盘上的任意文件夹(例如“我的图片”、“我的文档”等)中读/写文件。

用法示例:

function onInitFs(fs) {
  console.log('Opened file system: ' + fs.name);}
  window.requestFileSystem(window.TEMPORARY, 5*1024*1024 /*5MB*/, onInitFs, errorHandler);

FileSystem 规范还定义了计划用于WebWorkers的同步API(LocalFileSystemSync)接口。不过,本教程不涉及该同步API。

在本文档的其余部分中,我们将使用相同的处理程序处理异步调用引发的错误:

function errorHandler(e) {  
  var msg = '';  
  
  switch (e.code) {  
    case FileError.QUOTA_EXCEEDED_ERR:  
      msg = 'QUOTA_EXCEEDED_ERR';  
      break;  
    case FileError.NOT_FOUND_ERR:  
      msg = 'NOT_FOUND_ERR';  
      break;  
    case FileError.SECURITY_ERR:  
      msg = 'SECURITY_ERR';  
      break;  
    case FileError.INVALID_MODIFICATION_ERR:  
      msg = 'INVALID_MODIFICATION_ERR';  
      break;  
    case FileError.INVALID_STATE_ERR:  
      msg = 'INVALID_STATE_ERR';  
      break;  
    default:  
      msg = 'Unknown Error';  
      break;  
  };  
  
  console.log('Error: ' + msg);  
}

解的讯息。请求存储配额要使用 PERSISTENT 存储,您必须向用户取得存储持久数据的许可。由于浏览器可自行决定删除临时存储的数据,因此这一限制不适用于 TEMPORARY 存储。为了将 PERSISTENT 存储与 FileSystem API 配合使用,Chrome 浏览器使用基于 window.webkitStorageInfo 的新 API 以请求存储:

window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(grantedBytes) {  
  window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);  
}, function(e) {  
  console.log('Error', e);  
});

用户授予许可后,就不必再调用 requestQuota() 了。后续调用为无操作指令。您还可以使用 API 查询源的当前配额使用情况和分配情况:window.webkitStorageInfo.queryUsageAndQuota()使用文件沙盒环境中的文件通过 FileEntry 接口表示。FileEntry 包含标准文件系统中会有的属性类型(name、isFile...)和方法(remove、moveTo、copyTo...)。FileEntry 的属性和方法:

fileEntry.isFile === true  
fileEntry.isDirectory === false  
fileEntry.name  
fileEntry.fullPath  
...  
  
fileEntry.getMetadata(successCallback, opt_errorCallback);  
fileEntry.remove(successCallback, opt_errorCallback);  
fileEntry.moveTo(dirEntry, opt_newName, opt_successCallback, opt_errorCallback);  
fileEntry.copyTo(dirEntry, opt_newName, opt_successCallback, opt_errorCallback);  
fileEntry.getParent(successCallback, opt_errorCallback);  
fileEntry.toURL(opt_mimeType);  
  
fileEntry.file(successCallback, opt_errorCallback);  
fileEntry.createWriter(successCallback, opt_errorCallback);  
...

为了更好地理解 FileEntry,本部分还提供了执行常规任务的众多技巧。创建文件您可以使用文件系统的 getFile()(DirectoryEntry 接口的一种方法)查找或创建文件。请求文件系统后,系统会向成功回调传递FileSystem 对象,其中包含指向该应用相应文件系统的根的 DirectoryEntry (fs.root)。以下代码会在该应用相应文件系统的根中创建名为“log.txt”的空白文件:

function onInitFs(fs) {  
  
  fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {  
  
    // fileEntry.isFile === true  
    // fileEntry.name == 'log.txt'  
    // fileEntry.fullPath == '/log.txt'  
  
  }, errorHandler);  
  
}  
  
window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);

请求文件系统后,系统会向成功处理程序传递 FileSystem 对象。我们可以将回调中的 fs.root.getFile() 命名为要创建的文件的文件名。您可以传递绝对路径或相对路径,但该路径必须有效。例如,如果您尝试创建一个其直接父级文件不存在的文件,将会导致出错。getFile() 的第二个参数是在文件不存在时从

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03实例教程 利用html5和css3打造一款创意404页面_html5教程技巧
  • 2018-12-03H5+C3做出优酷视频截图效果
  • 2017-08-06html5与css3小应用
  • 2018-12-03详解H5非常重要的28个新特性,新技巧和新技术
  • 2018-12-03在IE6系列等老式浏览器中使用HTML5的新标签实现方案_html5教程技巧
  • 2017-08-06html5基础标签(html5视频标签 html5新标签用法)
  • 2018-12-03canvas文字怎么换行?canvas文字换行的方法介绍
  • 2018-12-03HTML5实现简单图片上传所遇到的问题及解决办法 _html5教程技巧
  • 2018-12-03解决img标签上下出现间隙的方法
  • 2017-08-06IE9下html5初试小刀

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5实战与剖析之跨文档消息传递(iframe传递信息)
    • HTML5 dialog是什么?怎么使用HTML5中的dialog来实现模拟弹窗?
    • Html5 Canvas初探学习笔记(12) -图片裁减和调整
    • 浅谈h5增强了哪些页面元素
    • 小强的HTML5移动开发之路(43)——JqueryMobile页眉、工具栏和标签栏导航
    • HTML5 Canvas 起步(3)-颜色与渐变
    • 作为一个刚入门的前端爱好者,以后立志成为前端攻城狮的我,应该要学习哪些方面的知识?
    • 如何区别html5离线存储和本地缓存实例详解
    • 浅谈基于HTML5的在线视频播放方案
    • 怎样使用JS获取函数参数名称

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有