5

我们已经使用 HTML5 成功创建了一个离线应用程序。它的作用是将数据存储在 indexedDB 或 localStorage 中，在线时，本地存储和在线数据库将同步。一切都很好，直到我们决定添加上传图像的功能。

1）由于应用离线工作，我们无法在服务器中上传图片，我们将它们放在哪里？

可能的解决方案：

  • 离线时，保存路径，当用户在线时，通过创建输入元素并将路径分配给其值属性来上传图像。这种方法的问题是我们无法更改输入元素的 value 属性，并且无法获取要上传的图像的完整路径。似乎这个解决方案是不可能的。
  • 将图像保存在 indexedDB 或 localStorage 中，这可能吗？

2）如果我们成功将图片保存在indexedDB或localStorage中，一旦用户上线，我们将如何上传？

可能的解决方案：

  • WebSocket - 我还没有接触过这个。
  • Flash - 它可以在 iPhone 上运行吗？可能不是。

3) 如果我们成功将图片保存在 indexedDB 或 localStorage 中，我们将如何将其显示在页面上？图像元素使用 src 属性来确定要显示的图像，还有其他方法，例如使用图像二进制吗？

如果您以前遇到过同样的情况，您采取了哪些解决方法来实现您的目标？

4

1 回答 1

6

使用HTML5 中可用的FileAPI。您可以在那里“上传”您的图像，然后，当服务器重新联机时，您可以传输它们，甚至使用传统的 XHR。

FileAPI 可以安全使用，因为大多数主要浏览器都支持它：http ://caniuse.com/#feat=fileapi

详细的：

1）将文件写入permament或temporary存储（由我们的应用程序定义）。请注意，temporary当会话退出时（由浏览器自行决定），存储会被清除。

请参阅此处的教程：http ://www.html5rocks.com/en/tutorials/file/filesystem/?ModPagespeed=noscript

2) 我会使用传统的 XHRequests 来传输它们。它更容易且经过良好测试（您不必从头开始设计新协议）。

3) 这是最好的事情 :) 您可以直接从 File API 获取正确的 URL，因此图像会从您的缓存中显示。见这里：http ://www.html5rocks.com/en/tutorials/file/filesystem/?ModPagespeed=noscript#toc-filesystemurls

于 2013-08-29T07:30:02.453 回答