HTML5 离线应用程序中的文件上传

Posted 2023-02-19

【中文标题】HTML5 离线应用程序中的文件上传

【英文标题】：File uploads in HTML5 offline applications

【发布时间】：2012-03-18 06:15:51

【问题描述】：

我正在开发一个基于 Web 的应用程序，该应用程序可能会在 Internet 连接不稳定的环境中使用。我将它实现为一个 html5 离线应用程序，它将利用 HTML5 本地存储（实际上是 jQuery 插件 jStorage）。它是一个数据输入驱动的应用程序，因此离线时创建的所有新条目都保存在本地存储中，并在稍后重新建立 Internet 连接时与服务器同步。我几乎完成了这项工作，但现在我面临一个要求，当用户实际上需要上传图像以及数据输入提交时。我找到了这个 HTML5 API 规范 - http://www.w3.org/TR/file-upload/，它讨论了文件上传和离线使用权。在我深入探讨之前 - 是否有围绕此功能的任何包装器可以为我简化此操作？我还刚刚找到了这篇文章 - http://hacks.mozilla.org/2010/02/an-html5-offline-image-editor-and-uploader-application/ 它利用了公开可用的 TwitPic API，我想获得一些专业反馈来自这里的人。 谢谢！

【问题讨论】：

我不太确定我是否理解你。您无法将文件离线上传到服务器。时期。您链接到的演示必须保留文件并等待连接，但没有神奇的方法可以解决离线问题。

@RaymondCamden - 这正是我正在寻找的 - 将文件（或其内容）保存在某处，直到连接再次可用。我正在编写一个“偶尔连接”的应用程序，它不能一直依赖连接。它在 HTML5 本地存储中“缓存”未同步的记录，并在连接可用时将它们与服务器同步。我只是想知道如何使用文件来实现这一点。

【参考方案1】：

我知道我问这个问题已经有一段时间了，但我仍然看到这个问题被收藏和支持，所以我想我会分享我最终是如何解决这个问题的。 在我的情况下，文件不是那么大，所以我只是决定对它们进行 MIME 编码，然后将字符串存储在 HTML5 localStorage 中。它是一种魅力。

【讨论】：

更多细节会很方便。 This SO question 涵盖图像，但它应该作为一个很好的例子来做这个答案中大致描述的事情。

嗨@insiderpro，所以您将图像保存到本地存储，以后如何将它们推送到服务器？作为base64？ 10x

@Bill，是的，我将它们作为 base64 字符串推送到服务器。

嗨@insiderpro 谢谢。你能分享一些关于如何转换为 base 64 的例子吗？

@Bill，我的解决方案是信息亭，所以我控制使用哪个浏览器。这可能与所有浏览器兼容，也可能不兼容。

【参考方案2】：

我前段时间写过一篇关于 HTML5 文件 API 的文章 - http://speckyboy.com/2012/10/30/getting-to-grips-with-the-html5-file-api-2/

另请参阅 GitHub 存储库 - https://github.com/mailru/FileAPI 以获得高级控制。

【参考方案3】：

我认为localStorage 在这里不是正确的答案，因为localStorage 只保存字符串并且有 5 兆字节的存储限制。

我建议类似http://pouchdb.com

但如果你坚持localStorage，那么Mozilla Hacks有一篇关于在localStorage中存储图片的文章： http://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

indexedDB 可能是存储文件的更好位置： http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/