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 ...
随机推荐
- 微信小程序 - 自定义创建
自定义创建与默认创建完全相同, 只是不要勾选quick start即可 淡定(不要看到报错就紧张, 一定要淡定) 看看它说了什么, no such file or directory(没有文件或目录) ...
- 彩扩机项目--NPN和PNP三极管作为开关管的区别
上图是最终画好的电路.使用的是NPN三极管,并且把NPN三极管放在了下面.下面分析下NPN三极管作为开关管能否放在上面. 从上面两张图分析可知,当三极管作为开关管使用的时候,NPN三极管需要放在下面( ...
- maven(一) maven到底是个啥玩意~
我记得在搞懂maven之前看了几次重复的maven的教学视频.不知道是自己悟性太低还是怎么滴,就是搞不清楚,现在弄清楚了,基本上入门了.写该篇博文,就是为了帮助那些和我一样对于maven迷迷糊糊的人. ...
- Vijos 1025 小飞侠的游园方案 0-1背包
描述 经过抽签选择,小智将军第一个进入考场. 菜虫:(身上散射出华贵(?)的光芒)欢迎你,第一位挑战者!! 小智:--(走到菜虫身后,关灯)女王陛下,虽然我们国家现在很富裕,但也请您不要浪费电来用这么 ...
- 最长非降子序列的O(n^2)解法
这次我们来讲解一个叫做"最长非下降子序列"的问题及他的O(n^2)解法. 首先我们来描述一下什么是"最长非下降子序列". 给你一个长度为n的数组a,在数组a中顺 ...
- iconfont字体图标的使用方法--超简单!
我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐, ...
- Express 学习笔记纯干货(Routing、Middleware、托管静态文件、view engine 等等)
原始文章链接:http://www.lovebxm.com/2017/07/14/express-primer/ 1. Express 简介 Express 是基于 Node.js 平台,快速.开放. ...
- 【.net 深呼吸】监听剪贴板更新(针对Vista之后系统)
针对 XP 及以前的监视剪贴板更改的方法就不讲了,因为 XP 已严重过时.本篇老周介绍的方法面向 Vista 以上的系统. 在托管应用程序中监听剪贴板更新行为必须用到 Win 32 API ,具体做法 ...
- hdu 2612 多终点BFS
Find a way Problem Description Pass a year learning in Hangzhou, yifenfei arrival hometown Ningbo at ...
- Broker模块划分
本篇在上一篇<消息中间件架构讨论>的基础上分析Broker的模块划分. 上图是之前讨论确定的系统架构(后续内容会按照这个架构来叙述),几点基础: Broker采用主从结构 Broker负责 ...