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

Question

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

1)由于应用程序脱机工作,我们无法在服务器上传图像,我们将把它们放在哪里？

可能的解决方案:

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

2)如果我们成功地将图像保存在indexedDB或localStorage中,我们如何在用户上线后上传它？

可能的解决方案:

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

如果您以前遇到过相同的情况,您为实现目标做了哪些解决方法？

Answer 1

使用HTML5中提供的FileAPI.您可以在那里"上传"图像,然后,当服务器重新联机时,即使使用传统的XHR,也可以传输它们.

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

详细:

1)将文件写入permament或temporary存储(由我们的应用程序定义).请注意,temporary会话退出时会清除存储(由浏览器决定).

2)我会使用传统的XHRequests来传输它们.它更容易且经过充分测试(您无需从头开始设计新协议).

3)这是最好的事情:)您可以直接从File API获取正确的URL,因此图像将从缓存中显示出来.请看这里:http://www.html5rocks.com/en/tutorials/file/filesystem/？ModePagespeed=noscript#toc-filesystemurls