html5离线缓存,我要做一个图片上传功能,在用户拍完照后如果网络不好就进行缓存,怎么做

html-css021

html5离线缓存,我要做一个图片上传功能,在用户拍完照后如果网络不好就进行缓存,怎么做,第1张

HTML5的离线web应用允许我们在脱机时与网站进行交互。这在提高网站的访问速度和制作一款web离线应用上(如HTML5游戏)有很大的使用价值。

先来了解一下HTML5应用程序缓存和浏览器缓存的区别。

(有些)浏览器会主动保存自己的缓存文件以加快网站加载速度。但是要实现浏览器缓存必须要满足一个前提,那就是网络必须要保持连接。如果网络没有连接,即使浏览器启用了对一个站点的缓存,依然无法打开这个站点。只会收到一条错误信息。而使用离线web应用,我们可以主动告诉浏览器应该从网站服务器中获取或缓存哪些文件,并且在网络离线状态下依然能够访问这个网站。

微信内置浏览器,和一些主流浏览器支持调用摄像头,但也有很多不支持调用摄像头,仅支持相册。

如果是WebView中,就需要客户端支持了,android和ios的权限也是问题。

formData 简介

简单的说就是:通过formData,我们可以用ajax方式来发送表单数据;以前上传图片是需要用form表单提交的。

我们知道浏览器默认显示的文件上传按钮是很丑的,通常UI都会对上传按钮进行设计。有以下几种方案来写样式。

弊端:

通过ref获取上传按钮。

ref方式

event.target方式

坑:

FileReader 简介

通过 readAsDataURL() ,在读取操作完成后,result属性中将包含一个data:URL格式的字符串以表示所读取文件的内容。

base64字符串

兼容性

我在safari中测试,发现是支持的。

URL.createObjectURL 简介

通过URL.createObjectURL()创建一个URL对象,这个URL对象表示指定的file对象或Blob对象。

兼容性

张鑫旭的文章: HTML5 file API加canvas实现图片前端JS压缩并上传

张鑫旭的文章: 理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型

使用Camera API

张鑫旭