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

苹果上:

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

目录
相关文章
|
JavaScript 前端开发 Android开发
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
670 13
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
12月前
|
安全 数据挖掘 Android开发
Cellebrite UFED 4PC 7.72 (Windows) - Android 和 iOS 移动设备取证软件
Cellebrite UFED 4PC 7.72 (Windows) - Android 和 iOS 移动设备取证软件
812 2
Cellebrite UFED 4PC 7.72 (Windows) - Android 和 iOS 移动设备取证软件
|
安全 Android开发 数据安全/隐私保护
Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
1062 12
Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
|
JavaScript 搜索推荐 Android开发
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
717 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
|
移动开发 前端开发 安全
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
744 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
缓存 Java 测试技术
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
2225 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
前端开发 JavaScript
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中

热门文章

最新文章