本文摘自PHP中文网,作者巴扎黑,侵删。
最近在做信开发时,发现<input type="file" />在IOS中可以拍照或从照片图库选择,而Android系统则显示资源管理器,无拍照选项,网上查找资料,改为<input type="file" capture="camera">后,Android可显示相机和文档,但IOS则只有拍照选项了,最后通过判断设备类型使在IOS和Android下均可以显示拍照和图库选择,代码如下:1 2 3 4 5 6 7 8 | var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf( 'Android' ) > -1 || u.indexOf( 'Linux' ) > -1;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isAndroid){
$ ( "input[name='file']" ).attr( 'capture' , 'camera' );
}
|
安卓效果
IOS效果
以上就是html5上传图片IOS系统和Android系统下均显示摄像头拍照和图片选择的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
小程序中canvas如何实现图案在线定制的功能
html5怎样做出图片转圈的动画效果
介绍一个用html5 canvas 制作的时钟
处理html5新标签的浏览器兼容版问题
html5web本地存储实例详细说明
没有经验如何快速上手html5
详细介绍html5技术在风电、光伏等新能源领域的应用(图)
html5网页水印sdk的实现方法
html5 地理定位
分享html5制作banner的实例
更多相关阅读请进入《Android》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html5上传图片IOS系统和Android系统下均显示摄像头拍照和图片选择