支付宝赞助帐号:service@kuitao8.com 

HTML5简单实现网页的拍照上传功能

Created2014-09-16   Views 8953    Author 懒人程序
做web应用想达到这样的效果:

目前网上发布的教程中,大多数介绍HTML5网页拍照上传都是基于canvas调用摄像头,并转化为数据流进行传输,服务器解码并写入文件。前前后后代码好几百行,影响性能不说,达到的效果也不是我们想要的。

经过分析百度贴吧等网页端的代码,发现实现的技术其实很简单,就是下面这个input:

<input type="file" name="pic" id="pic" accept="image/*" class="upload-input">

就是上面这一行代码,就可以达到想要的效果了,手机会弹出选择对话框,询问选择摄像头拍照,还是相册等。最关键的就是accept属性,关于这个属性的更多内容,大家可以自己百度一下。

简单吗?够简单吧?而且兼容性一级棒。

服务器端的处理,就跟平常我们做网站的文件上传相同了,就不需要多啰嗦了。

当然,具体效果跟这个因为浏览器的不同会有区别。

上一篇: html5 用canvas 制作简单的下雨效果
下一篇: HTML5表单及其验证
支持键盘 ← →

邮件订阅

订阅我们的精彩内容