在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存储（由我们的应用程序定义）。请注意，会话退出时会清除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