前端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是专门用来支持多选的。

苹果上:

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

目录
相关文章
|
开发工具 Android开发
X Android SDK file not found: adb.安卓开发常见问题-Android SDK 缺少 `adb`(Android Debug Bridge)-优雅草卓伊凡
X Android SDK file not found: adb.安卓开发常见问题-Android SDK 缺少 `adb`(Android Debug Bridge)-优雅草卓伊凡
1060 11
X Android SDK file not found: adb.安卓开发常见问题-Android SDK 缺少 `adb`(Android Debug Bridge)-优雅草卓伊凡
|
移动开发 前端开发 安全
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
839 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1387 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
777 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
移动开发 前端开发 搜索推荐
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
670 25
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
前端开发 JavaScript
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
460 2
前端基础(十七)_HTML5新特性

热门文章

最新文章