input[type=file]标签 本地文件、拍照、录像 上传的兼容性问题
移动端 input[type=file]标签 本地文件、拍照、录像 上传的兼容性问题: https://blog.csdn.net/sinat_35538827/article/details/85997205 或 https://blog.csdn.net/weixin_34101229/article/details/88696293
问题描述:移动端上传文件,可以选择 本地文件、拍照、录像、录音。但是他们不是同时可以选择的,不同的手机还是有差异的。
一、input[type=file] 属性:https://blog.csdn.net/sinat_35538827/article/details/85997205
三个属性:
1、accept - 规定可提交的文件类型。
2、capture - 系统所捕获的默认设备。camera(照相机),camcorder(摄像机),microphone(录音)
3、mutiple - 支持多选。当支持多选时,multiple优先级高于capture。
二、不同环境中 input[type=file] 不同属性对应的效果:(主要的运行环境:ios浏览器、ios微信网页、安卓浏览器、安卓微信网页)
1、<input type="file">
ios浏览器 | ios微信 | 安卓浏览器(左边小米手机,右边魅族手机) | 安卓微信 |
![]()
|
![]() (和ios浏览器上一样的)
|
![]() ![]()
(不同是安卓系统,本身就有差异) |
小米手机:直接进入文件系统,没有弹出选项 魅族手机:直接进入文件系统,没有弹出选项 (两者的行为是一样的) |
2、<input type="file" capture="camera"> 【一般都是,直接调用对应的设备 进行获取文件。也有手机会不一样,类似下面的魅族手机】
ios浏览器 | ios微信 | 安卓浏览器 | 安卓微信 |
直接进入拍照或录像的功能里 |
直接进入拍照或录像的功能里 (和ios浏览器是一样的) |
小米手机:直接进入拍照功能,但是不能录像。 魅族手机:弹出选项,如下 |
小米手机:直接进入文件系统,没有弹出选项 魅族手机:直接进入文件系统,没有弹出选项 (两者的行为是一样的) |
3、<input type="file" accept="image/*">
ios浏览器 | ios微信 | 安卓浏览器(小米、魅族) | 安卓微信 |
![]() |
(和ios浏览器是一样的) |
(两者的行为是一致的) |
(两者的行为是一致的)
|
4、<input type="file" accept="image/*" capture="camcorder">
accept 和 capture 两者冲突,以accept为准
个人得出结论:
ios上基本表现一致,且根据属性设置。可以实现定制,拍照和录像 是 都有还是 选择其一。
安卓机上就有很大差异,大部分的安卓机都是不能实现 弹出窗上同时有 拍照和录像 功能的。 如果要实现 拍照和录像功能都可以的话,弹出选择的组件使用H5自己写。选择选项后,js对 input[type=file] 标签的属性修改。如,
点击自定义的拍照选项后,直接跳到拍照功能(不弹出原生的选项组件)。
三、小程序中的H5的 input[type=file] 和 微信H5页面的表现也是不一样的。
安卓微信小程序中 要调用 拍照或录像 必须设置 capture="camera" 属性,且直接进入拍照或 录像中。
ios微信小程序 | 安卓微信小程序 |
拍照录像上传文件可以正常定制 |
没有选项弹出,要么直接到文件列表,要么只能拍照或录像 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
2018-05-14 canvas—基本介绍