前端html input =“file“ ios/安卓解决无法选择图库/拍照问题

简介: 前端html input =“file“ ios/安卓解决无法选择图库/拍照问题

背景

在使用input上传图片的时候,有时候会出现安卓能拍照和选择图库,而ios只能拍照的情况,主要原因是由input的multiple和capture两个属性的不同设置所造成的

解决办法

1、multiple="multiple"capture="camera"安卓:可拍照可图库iOS只可拍照
2、multiple="multiple"无capture安卓:只可拍照ios:可拍照可图库
3、无multiplecapture="camera"安卓:只可图库ios:只可拍照
4、无multiple无capture安卓ios都可拍照可图库

延申

HTML5官方文档解释:capture属性用于调用设备的摄像头或麦克风。


当accept=”audio/或video/”时capture只有两种值,一种是user,用于调用面向人脸的摄像头(例如手机前置摄像头),一种是environment,用于调用环境摄像头(例如手机后置摄像头)。


当accept=”audio”时,只要有capture就调用设备麦克风,忽略user和environment值。


至于网上提到的camera和filesystem,官方没提。

官方文档:www.w3.org/TR/2018/REC-html-media-capture-20180201/


iOS最遵守遵守HTML5规范,其次是X5内核,安卓的webview基本忽略了capture。

理想情况下应该按照如下开发webview:


当accept=”image/*”时,capture=”user”调用前置照相机,capture=”其他值”,调用后置照相机

当accept=”video/*”时,capture=”user”调用前置录像机,capture=”其他值”,调用后置录像机

当accept=”image/,video/”,capture=”user”调用前置摄像头,capture=”其他值”,调用后置摄像头,默认照相,可切换录像

当accept=”audio/*”时,capture=”放空或者任意值”,调用录音机

当input没有capture时,根据accppt类型给出文件夹选项以及摄像头或者录音机选项

input含有multiple时访问文件夹可勾选多文件,调用系统摄像头或者录音机都只是单文件

无multiple时都只能单文件

安卓上:

<inputtype="file"accept="image/*"capture="camera">//只调用相机<inputtype="file"accept="video/*"capture="camcorder">//只调用摄像机<inputtype="file"accept="audio/*"capture="microphone">//只调用录音设备

input:file标签还支持一个multiple属性,表示可以支持多选,如:

<inputtype="file"accept="image/*"multiple>

加上这个multiple后,capture就没啥用了,因为multiple是专门用来支持多选的。

苹果上:

全部都是直接调用相机,就是安卓才会有这些花里胡哨的东西

目录
相关文章
|
2月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
100 1
|
2月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
48 13
|
2月前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
69 0
|
3月前
|
存储 移动开发 前端开发
HTML5时代来临,这些新特性你掌握了吗?一篇文章带你玩转Web前端技术潮流!
【8月更文挑战第26天】HTML5(简称H5)作为新一代Web标准,相比HTML4带来了诸多增强功能。
53 2
|
3月前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
61 0
|
3月前
|
监控 数据可视化 前端开发
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
|
5月前
|
前端开发 iOS开发
input框设置placeholder属性在iOS中显示不完整
input框设置placeholder属性在iOS中显示不完整
69 1
|
6月前
|
存储 Web App开发 Android开发
iOS不支持WebP格式图片解决方案和iPhone 7及其后硬件拍照的HEIC格式图片
iOS不支持WebP格式图片解决方案和iPhone 7及其后硬件拍照的HEIC格式图片
615 1
iOS不支持WebP格式图片解决方案和iPhone 7及其后硬件拍照的HEIC格式图片
|
5月前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
48 2
|
5月前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)