HTML5文件 API: 功能和兼容性

分享于 

12分钟阅读

Web开发

  繁體

介绍

HTML5文件API用于通过浏览器访问客户端机器上的文件。 HTML5标准中有 3个级别的文件 api:

  • File ( 让我把它称为)
  • :Writer ( 也称为文件编写器 API )
  • :目录和系统 ( 也称为文件系统 API )

在分析每个级别的能力和与不同浏览器的兼容性方面我花了一些时间。 这将有助于选择我未来web应用程序开发的技术,可以访问客户端本地文件,例如上载和下载文件。

浏览器浏览器

我选择了以下浏览器作为实验浏览器。 他们都在进行研究时的最新版本中。

  • Microsoft IE 10
  • 谷歌 Chrome 30
  • Mozilla Firefox 24
  • Safari 6 ( Mac操作系统和 iOS 7 )

注意:Safari 5.1.7是 Windows的最后一个版本。 苹果从 Safari 6终止对 Windows的支持。 Safari 5.1.7不支持文件 API。 换句话说,在 Windows 上使用Safari时,我们不能使用文件 API。

演示代码

演示代码文件位于 vs 2012 web应用程序中。 它包含以下文件:

  • FileReadApi.html::: 演示读取小文件或者大文件并显示进度。 也支持停止和恢复。 这里演示可以在所有以前列出的浏览器中运行。
  • FileSaver.html::: 演示如何实现和使用 FileSaver这里演示可以在所有以前列出的浏览器中运行。
  • FileSystemApi.html::: 演示如何使用文件系统API和 FileWriter。 它只在以前列出的浏览器中使用了的Chrome
  • FileSystemApiConsumer.html::: 列出在 FileSystemApi.html 创建的所有文件,并读取指定的用户。 仅适用于 Chrome
  • DownloadFileViaBrowser.html and and::::::: 演示在不公开服务器上的文件位置的情况下启用浏览器下载功能的服务器代码。 这里演示可以在几乎所有浏览器中运行。

文件读取器 API

有关标准详细信息,请参考 http://www.w3.org/TR/FileAPI/

能力

使用文件读取器 API,我们可以:

  • 获取一个或者多个文件对象 (。File 接口的实例),客户机通过弹出 open-file-dialog ( <input type="file"/> ) 选择它。 任何进一步的文件操作都必须在这些文件对象上执行。
  • 只读取了文件对象的以下信息:
  • 不带路径的。
  • MIME 类型。
  • 以字节为单位的大小。 实时更新。
  • 上次修改日期和时间 实时更新。
  • 从任何字节位置字节读取文件 data data any ( 通过 FileReader 接口)。 这可以帮助我们实现中断和恢复上传。
  • 支持收费读写器 ( Read-while-Writing: 读取另一个程序写入的文件,该程序已经将文件共享模式设置为读取)。

限制

文件读取器API具有以下限制:

  • 仅可以用于客户端从弹出open-file-dialog显式选择的文件。 我们无法打开文件,即使知道完整文件路径。
  • 监视文件是否被删除的方法。 因此我们无法在读写网方案中监视标志文件。

有一个有趣的事情。 我试图找到一个解决文件删除问题的方法。 我的计划步骤是:

  • 让客户端明确选择现有的标志文件,这样我就可以得到标志文件对象。
  • 让我的代码定期得到标志文件大小,最后修改日期并读取第一个字节。 如果像file-not-found异常一样发生了一些奇怪的事情,我可以说标志文件被删除了。

但是,我发现实验中不同浏览器中的行为有很大差异:

  • Firefox: 抛出file-not-found异常很好 !
  • Chrome: 不例外,最后修改的日期不断更改到当前时间。 奇数 !
  • IE 10: 没有异常,也没有信息更改。 非常怪异 !
  • Safari: 未测试。

实验表明,计划的解决方案不能适用于所有浏览器。 我认为这是因为HTML5文件API标准没有给出关于如何处理这种错误的明确描述。 所以我不得不放弃workaround计划。

浏览器支持

我们所有的实验浏览器都支持文件读取器 API。

文件编写器 API

有关标准详细信息,请参考 http://www.w3.org/TR/file-writer-api/

能力

使用文件编写器 API,我们可以:

  • 通过弹出( 通过 saveAs 函数和 FileSaver 接口) 将一个 blob 保存为客户端指定的文件。 如果该文件存在,将覆盖该文件。
  • 在沙箱中,将多个 blob 在任何字节位置( FileWriter 接口) 中的单个文件中。

请参考文件系统API章节了解关于沙箱的更多信息。

限制

文件编写器API具有以下限制:

  • 使用编写文件时只允许使用一个 blob 也就是说,我们不能写入一个包含多个数据块的文件。 等待所有的块到达并构造一个巨大的blob是不可行的。 blob大小限制是由机器容量的客户端硬件决定的,这样不不不不不不不不不不是安全的。 无论如何,写小文件( 可能 <= 10 MB ) 是可以的。
  • 在客户端的所有数据都准备就绪之前,FileSaver不会写入一个文件。 这意味着,在写入完成之前,客户端上的其他程序无法读取该文件。
  • FileWriter 仅在沙箱中可用。 事实上,标准说它可能被移动到文件系统 API。
  • 不支持删除文件

注意:虽然 BlobBuilderFileSaver 在标准中,但所有浏览器供应商都不推荐使用它们。 我们需要直接构建 Blob 并实现我们自己的FileSaver 或者使用第三方实现。

浏览器支持

我们所有的实验浏览器都支持我们自己的FileSaver 实现。

Chrome 是唯一支持 FileWriter的。

文件系统 API

有关标准详细信息,请参考 http://www.w3.org/TR/file-system-api/

能力

使用文件系统 API,我们可以:

  • 以 private 文件系统( 使用 requestFileSystem 函数) 创建沙箱
  • 沙箱大小不超过大小限制。 唯一的限制是硬盘容量。
  • 在沙箱中完成所有目录相关操作,包括创建。重命名。删除。复制。移动等等。
  • 在沙箱中执行所有文件相关操作,包括创建。重命名。读取。写入。删除。复制。移动等等。

限制

文件系统API只能在独立的应用程序独立沙箱中使用。 应用程序的区别是:协议的,地址和的端口。 例如" http://www.codeproject.com"。" https://www.codeproject.com"。" http://www.codeproject.com:8080"和" http://us.codeproject.com"都是不同的应用程序;" http://www.codeproject.com/my/default.aspx"和" http://www.codeproject.com/api/data/"位于相同的应用程序中。

因此,文件系统API具有以下限制:

  • 应用程序一个沙箱中的项目对其他应用程序而言是
  • 沙箱中的项目对其他类型的网络浏览器 例如在 Google Chrome 中创建的沙箱对于其他非浏览器浏览器是不可见的。
  • 沙箱中的项目对于非浏览器程序

在File和文件编写器API的帮助下,仍然可以在沙箱和客户端系统的文件之间复制文件。

浏览器支持

Chrome 是我们在实验浏览器中支持文件系统API的唯一。 没有其他浏览器供应商保证他们将来会实现它。 实际上,它在浏览器供应商之间无法获得牵引,只支持基于 webkit的浏览器。

下面的屏幕截图显示了 Firefox 在 http://html5test.com 上的测试结果。 请注意中央 italic 评论。

相关主题

通过浏览器下载

我们需要 FileSaver 或者文件编写器的一个原因是启用特殊文件下载逻辑。 使用浏览器的下载功能,如 Flash。Silverlight或者 ActiveX,在网络浏览器中下载文件的最佳方式是使用浏览器的嵌入式下载功能。 这里功能可以:

  • 覆盖 FileSaver的所有功能。
  • 在浏览器中下载文件的默认下载文件夹或者其他任何文件夹,客户端在弹出save-file-dialog中指定 客户端可以通过浏览器设置选择最喜欢的方式。
  • 客户端可以选择是否在下载后打开文件
  • 下载文件时,HTTP协议支持断点恢复。 尽管目前没有浏览器实现HTTP断点,但有些下载软件支持它。 很有可能,一些或者全部网络浏览器将来会支持它。

这里功能也有它的局限性:

  • 下载完成前,文件数据被写为一个临时文件名为的临时文件。 下载完成后浏览器将重命名文件。 因此,在下载完成之前,其他程序无法读取该文件的。

启用浏览器下载的最简单方法是将文件直接公开为像"http://mysite.com/GDrive/Data/Org2_53/Loc2_230/Site2_232/Folder2_242/My_244.data" 这样的URL,它映射到交互网站的物理路径。 不需要做额外的编码工作。 但是,这种方法有以下缺点:

  • 它向客户端暴露了太多信息。
  • 网络场中路径映射与部署的复杂。
  • 实现授权的复杂性。
  • 对于将来的更改,比如 文件夹结构更改不灵活。

更好的方法是为web服务或者 Web API 或者HTTP处理程序编写收费以提供来自web浏览器的下载请求。 然后我们可以提供像"http://mysite.com/api/files/download?id=244" 这样的下载网址,它更加干净。灵活。安全和易于管理。

注意:如果不能将大文件传输到客户端,请使用 大小限制由服务器功能的硬件决定。 Microsoft引入了更好的解决方案: 。

结束语

作为总结,有一些重要的备忘录:

  • 对客户端文件系统的任何读写操作都需要通过打开的文件或者保存文件对话框对客户端显式审批
  • File 为用户提供了支持。
  • 可以自己实现文件编写器API的FileSaver,并提供了广泛支持的。
  • 在一些 webkit 浏览器中,FileWriter 只提供了的文件系统 API,比如 Chrome。 而且他们只能操作一个收费的应用程序中的文件,隔离沙箱。
  • 如果你不想使用任何插件技术,浏览器嵌入式下载特性是实现你的特殊文件下载逻辑的最佳选择。

引用

[1]"w3c HTML5文件 api",http://www.w3.org/TR/FileAPI/

[2]"w3c HTML5文件 API: 作者,http://www.w3.org/TR/file-writer-api/

[3]"w3c HTML5文件 API: 目录和系统",http://www.w3.org/TR/file-system-api/

[4]"HTML5测试",http://html5test.com

[5]"探索 文件系统 api",http://www.html5rocks.com/en/tutorials/file/filesystem/,Eric Bidelman


COM  文件  API  Html5  cap  兼容性  
相关文章