在 HTML5 离线应用程序中使用图像？

Question

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

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

可能的解决方案：

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

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

可能的解决方案：

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

3) 如果我们成功将图片保存在 indexedDB 或 localStorage 中，我们将如何在页面上显示它？图片元素使用 src 属性来决定显示哪张图片，有没有其他类似图片二进制的方法？

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

Answer 1

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

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

详细说明：

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

教程见这里：http://www.html5rocks.com/en/tutorials/file/filesystem/?ModPagespeed=noscript

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

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