我正在开发一个基于Web的应用程序，可能会在网络不稳定的环境中使用。我将其实现为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，我想在这里请一些专业人士给予反馈。谢谢！
HTML5离线应用中的文件上传
17
- Insider Pro
2
我不太确定我理解你的意思。你无法将文件上传到离线服务器。这是事实。你提供的演示可能会保留文件并等待连接，但是没有神奇的方法可以规避离线状态。 - Raymond Camden
4@RaymondCamden - 这正是我所需要的 - 将文件（或其内容）保存在某处，直到连接再次可用。我正在编写一个“偶尔联机”的应用程序，不能依赖于始终保持连接。它会在HTML5本地存储中“缓存”未同步记录，并在连接可用时将它们与服务器同步。我只是想知道如何通过文件实现这一点。 - Insider Pro
3个回答
4
我知道我已经很久没有问这个问题了，但是我仍然看到这个问题被收藏和赞了，所以我想分享一下我最终是如何解决的。 在我的情况下，文件并不是很大，所以我决定对它们进行MIME编码，然后将字符串存储在HTML5 localStorage中。它完美地工作。
- Insider Pro
5
嗨@insiderpro，所以您将图像保存到本地存储器中，然后如何将它们推送到服务器上？使用base64吗？谢谢！ - Bill
1@Bill，是的，我将它们作为base64字符串推送到服务器上。 - Insider Pro
嗨@insiderpro谢谢。你能分享一些将其转换为base64的示例吗？ - Bill
2@Bill，我的解决方案是一个信息亭，所以我可以控制使用哪个浏览器。这可能与所有浏览器兼容，也可能不兼容。<input type="file" id="myfile" />
<script>
function readImage(input) {
if ( input.files && input.files[0] ) {
var FR= new FileReader();
FR.onload = function(e) {
$('#job-thumb').attr('src',e.target.result );
$('#job-thumb').attr('data-mime',e.target.result );
};
FR.readAsDataURL( input.files[0] ); } } $("#myfile").change(function(){ readImage(this); }); </script> - Insider Pro
FR.readAsDataURL( input.files[0] ); } } $("#myfile").change(function(){ readImage(this); }); </script> - Insider Pro
1
我不认为这里使用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/
- ehrhardt
1
我之前写过一篇关于HTML5文件API的文章 - http://speckyboy.com/2012/10/30/getting-to-grips-with-the-html5-file-api-2/
同时，参考GitHub仓库 - https://github.com/mailru/FileAPI 获取高级控件。
- Pankaj Parashar
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接