html5图片上传时IOS和Android均显示摄像头拍照和图片选择
最近在做信开发时,发现<input type="file" />在IOS中可以拍照或从照片图库选择,而Android系统则显示资源管理器,无拍照选项,网上查找资料,改为<input type="file" capture="camera">后,Android可显示相机和文档,但IOS则只有拍照选项了,最后通过判断设备类型使在IOS和Android下均可以显示拍照和图库选择,代码如下:
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
//alert('是否是Android:'+isAndroid);
//alert('是否是iOS:'+isiOS);
if(isAndroid){
$ ("input[name='file']").attr('capture','camera');
}
安卓效果

IOS效果

html5图片上传时IOS和Android均显示摄像头拍照和图片选择的更多相关文章
- js基础进阶--图片上传时实现本地预览功能的原理
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
- kindeditor更改图片上传时网络图片的路径
当我们想要使用kindeditor的图片上传功能时,有两种选择图片方式,一种是本地选择,一种是在图片空间中选择,图片空间的默认地址是server上的/kindeditor/attached/image ...
- 前端手势控制图片插件书写四(图片上传及Ios图片方向问题)
1.在图片上传中,使用的input的type为File的属性.使用filereader的Api let that = this; var file = document.getElementById( ...
- 用海豚框架(DolphinPHP)实现单/多图片上传时,如何获得图片路径
用框架实现图片上传很简单,就不多说了,然后这个框架的实现机制是这样的,我们选择图片,点击上传,他会将图片保存在uploads下,以当天时间和随机字母作为图片名,然后在返回个数字,这个数字是这个图片的i ...
- Laravel-Admin图片上传时的问题
关于laravel-admin进入有图片上传页面时,会提示未配置存储路径等信息.此时需要去配置. 查看config/admin.php里面有 'upload' => [ // Disk in ` ...
- js判断图片上传时的文件大小,和宽高尺寸
今天在做图片上传的小功能,使用了一个kissy上传组件.很好奇它是如何在图片上传前,检测到图片的大小和尺寸的?我们来写个小实例实现一下吧 如何读取图片的size 首先,原生input file控件有个 ...
- wordpress 图片上传时发生了错误,请稍后再试 的解决办法
前一天网站还是好好的,仅一天过后就显示图片无法上传,百思不得其解 上下百度,大多数帖子提供的解决办法对我都不适用,继续搜,最后发现一篇帖子中提到是wp-config的编码格式问题 想到昨天刚好修改了下 ...
- Java Struts图片上传至指定文件夹并显示图片
继上一次利用Servlet实现图片上传,这次利用基于MVC的Struts框架,封装了Servlet并简化了JSP页面跳转. JSP上传页面 上传一定要为form加上enctype="mult ...
- Java Servlet图片上传至指定文件夹并显示图片
在学习Servlet过程中,针对图片上传做了一个Demo,实现的功能是:在a页面上传图片,点击提交后,将图片保存到服务器指定路径(D:/image):跳转到b页面,b页面读取展示绝对路径(D:/ima ...
随机推荐
- phpcms列表页内容如何替换?
以aboutus.html页面为例. 1.将aboutus.html重新命名为list-aboutus.html: 2.在后台页面,在栏目列表中将栏目列表页模板设置为 list-aboutus.htm ...
- vue-resource promise兼容性问题
背景 其实这个问题在之前的项目开发中就出现过,但是当初只解决问题了,并没有针对问题作总结:于是乎今天踩到了自己埋的坑,所以决定记录一下.那么到底是什么问题呢?就是"在安卓低版本,如果你在vu ...
- celery_01 _celery安装启动
简介:celery是一个分布式队列的管理工具,提供了快速管理和操作分布式任务队列的一些方法的框架 特点:1.celery易于使用和维护,不需要进行很复杂的配置,简单的celery例子: from ce ...
- Android 7.0 安装器安装过程分析 (com.android.packageinstaller)
1 安装入口PackageInstallerActivity,这个类只是在安装前做准备.通过各种校验,然后弹出被安装应用的权限框,等待用户安装.具体的流程如下 1.1 求mSessionId 如果是 ...
- nginx常用配置系列-HTTPS配置
接上篇,nginx配置系列 HTTPS现在已经很流行,特别是AppStore上线的应用要求使用HTTPS进行通信,出于安全考虑也应该使用HTTPS,HTTPS配置需要准备证书文件,现在也有很多免费证书 ...
- Entity Framework入门教程:什么是Entity Framework
Entity Framework简介 Entity Framework是微软提供的一个O/RM(对象关系映射)框架.它基于ADO.NET,为开发人员提供了一种自动化的机制来访问和存储数据库中的数据. ...
- window.onload的加载和$(document).read()
1.执行时机: window.onload :必须等到网页中所有的内容加载完之后才执行. $(document).read():网页中所有的DOM结构执行完毕后.可能DOM元素并未加载完. 2.单个网 ...
- 【技术解密】SequoiaDB分布式存储原理
分布式架构势在必行 在传统的数据库技术中,为了保证数据的安全与高性能,通常会选择高端的外置存储作为数据库的主要存储源,而本地磁盘则被视为不可靠的性能低下的一种设备.这种观念的产生,主要是由于过去本地磁 ...
- 使用阿里百川HotFix
前言:首先要弄懂HotFix是干嘛的,不然就别向下看了.这里仅仅根据官方文档的代码书写,亲测可用,不做理论指导. Android Studio集成: 添加maven仓库地址: repositories ...
- (转载)Apache与Tomcat 区别联系
原文链接:http://www.admin10000.com/document/974.html Apache 和 Tomcat 都是web网络服务器,两者既有联系又有区别,在进行HTML.PHP.J ...