为了账号安全,请及时绑定邮箱和手机立即绑定

具有捕获和接受属性的HTML文件输入控件工作不正确?

具有捕获和接受属性的HTML文件输入控件工作不正确?

拉丁的传说 2019-12-17 15:19:06
我的问题:然后,用户单击input type=file用户必须获得upload file + camera对话框。我正在使用此html属性accept和capture。但是在某些现代设备上,这不会发生。下面有代码示例和下表,说明其正常工作与否。代码示例在Mobile Safari和中进行了测试Chrome。W(ork)-启用 upload image dialog with cameraP(人工工作)-启用 upload dialog(not image only) with cameraN(ot work)- only camera启用Ch-均值 ChromeMS-平均值 Mobile Safari#--------------------------------------------------------------------------------|devices/example   | Ch 1| Ch 2| Ch 3| Ch 4| Ch 5| MS 1| MS 2| MS 3| MS 4| MS 5| --------------------------------------------------------------------------------|Samsung S3/4.1    |  N  |  N  |  P  |  P  |  W  |  W  |  N  |  P  |  P  |  W  |--------------------------------------------------------------------------------|Samsung S3/4.3    |  N  |  N  |  P  |  P  |  P  |  N  |  N  |  P  |  P  |  P  |--------------------------------------------------------------------------------|Samsung Galaxy Tab|  N  |  N  |  P  |  P  |  W  |  W  |  N  |  P  |  P  |  W  |--------------------------------------------------------------------------------|Samsung Note      |  N  |  N  |  P  |  P  |  W  |  W  |  N  |  P  |  P  |  W  |--------------------------------------------------------------------------------|iPhone 5          |  W  |  W  |  P  |  P  |  W  |  W  |  Y  |  P  |  P  |  W  |--------------------------------------------------------------------------------|Nexus 4           |  N  |  N  |  P  |  P  |  W  |  -  |  -  |  -  |  -  |  -  |--------------------------------------------------------------------------------如您所见,我只能upload file + camera使用<input type="file" accept="image/*">只要。但是capture在这种情况下没有属性,这让我感到担忧,并且Android 4.3出现了问题。我的问题是:表中的行为是真的吗?Android 4.3的行为是否有错误?我是否可以信任浏览器,它将始终添加摄像头以上传没有捕获属性的对话框?(请添加证明链接以获得答案)谢谢。PS Question非常特殊,但是在我的网站上,我必须为用户提供访问其图像和照相机的权限。另外,我认为我的桌子对任何人都可能有帮助,并且如果没有人回答,我也会寻找答案并将其张贴在这里。
查看完整描述

2 回答

?
慕的地6264312

TA贡献1817条经验 获得超6个赞

这是实际答案。只需将其发布在这里供下一个用户使用:


实际上,当前的实现似乎根本不依赖于capture属性,而仅依赖于type和accept属性:浏览器显示一个对话框,用户可以在其中选择文件的获取位置,以及该capture属性不考虑在内。例如,iOS Safari依赖于图像和视频(非音频)的accept属性(非捕获)。即使您不使用该accept属性,浏览器也会让您在“拍摄照片或视频”和“选择现有”之间进行选择(感谢@firt指出这一点)。




查看完整回答
反对 回复 2019-12-17
?
莫回无

TA贡献1865条经验 获得超7个赞

“正确”的代码和您应该使用的代码是第五个代码:


<input type="file" accept="image/*">


这就是为什么它在大多数设备上都能正常工作的原因。上面的代码正确,完整,足以告诉iOS和Android:


您要捕获图像(accept="video/*"用于视频和 accept="audio/*"音频,请完全跳过以允许任何操作)。

用户应该能够选择现有的一个或当场捕获它

我是否可以信任浏览器,它将始终添加摄像头以上传没有捕获属性的对话框?

是。


该capture属性不是用来在对话框中包括camera选项的(<input type="file">足够了),而是指示首选从网络摄像头直接捕获。根据W3C建议规范:


capture属性是一个布尔属性,如果指定,则指示直接从设备捕获媒体是首选。


capture受Android 3.0+支持,如果capture代码中存在,它将直接带您进入相机应用。


iOS6-10中不提供支持,该支持将始终为您提供至少两个选项:“拍照” +“照片库”。


该capture属性在规范中得到了发展(这就是为什么您在整个StackOverflow中都会看到多个版本的原因):


2010年7月: accept="image/*;capture=camera"

2011年4月:(capture="camera"字符串)

2012年12月:(capture布尔值,W3C候选推荐标准,)

PS:我已经对HTML Media Capture进行了大量研究,请参见HTML9 Media Capture的正确语法和iOS9中Media Capture 的新提示。这是我的测试平台,具有20多种代码组合。


查看完整回答
反对 回复 2019-12-17
  • 2 回答
  • 0 关注
  • 599 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信