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

Question

我的问题：

然后用户单击 input type=file 用户必须得到 upload file + camera 对话框。我正在使用此 html 属性 accept 和 capture 。但在一些现代设备上，这不会发生。下面是代码示例和表格，它的工作与否。代码示例在 Mobile Safari 和 Chrome 中进行了测试。

长话短说：

我有 5 个代码示例，只有 input type file ：

1.( jsfiddle )

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

2. ( jsfiddle )

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

3.（ jsfiddle ）

 <input type="file" capture="camera">

4.（ jsfiddle ）

 <input type="file" capture>

5.（ jsfiddle ）

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

测试设备：

• 三星 S3 (Android 4.1.2)
• 三星 S3 (Android 4.3)
• 三星 Galaxy Tab 2 7.0 (Android 4.2.2)
• 三星笔记 (Android 4.1.2)
• iPhone 5 (iOS 7.0.4)
• 连结 4 (Android 4.4)

结果表：

• W(ork) - 表示启用 upload image dialog with camera
• P(artially works) - 表示启用 upload dialog(not image only) with camera
• N(不工作) - 意味着 only camera 启用
• Ch - 表示 Chrome
• MS - 表示 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 也有问题。

我的问题是：

1. 表格中的行为是否真实？ Android 4.3 行为是一个错误？
2. 我可以相信浏览器总是会在没有捕获属性的情况下将相机添加到上传对话框吗？ （请添加证明链接以获取答案）

谢谢。

PS 问题很特殊，但在我的网站上，我必须为用户提供访问其图像和相机的权限。此外，我认为我的表格对任何人都有帮助，而且我会寻找答案，如果没有人回答，我会在此处发布我的答案。

原文由 Pinal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

实际上，目前的实现似乎根本不依赖于 capture 属性，而只依赖于 type 和 accept 属性：浏览器显示一个对话框，用户可以在其中选择文件必须被获取的位置，并且 capture 不考虑属性。例如，iOS Safari 依赖于图像和视频（不是音频）的接受属性（不是捕获）。即使您不使用 accept 属性，浏览器也会让您在“拍照或录像”和“选择现有”之间进行选择（感谢@firt 指出这一点）。

从此

2016 年 2 月 17 日编辑： 此行为在设备上仍然有效。

原文由 Pinal 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

1. 你想 捕获图像（使用 accept="video/*" 用于视频和 accept="audio/*" 用于音频，完全跳过以允许任何内容）。
2. 用户应该能够 选择现有的 或 当场捕获它

1. 我可以相信浏览器总是会在没有捕获属性的情况下将相机添加到上传对话框吗？

是的。

capture 属性不用于在对话框中包含相机选项（ <input type="file"> 就足够了），但表示 首选 从网络摄像头直接捕获。来自 W3C 推荐规范：

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

capture 受 Android 3.0+ 支持，如果 capture 出现在代码中，它将带您直接进入相机应用程序。

iOS6-10 不支持总是给你至少 2 个选项：“拍照”+“照片库”。

capture 属性在规范中有所发展（这就是为什么您会在整个 StackOverflow 中看到多个版本）：

1. 2010 年 7 月： accept="image/*;capture=camera"
2. 2011 年 4 月： capture="camera" （字符串）
3. 2012 年 12 月： capture （布尔值， W3C 候选推荐，）

PS：我对 HTML Media Capture 进行了大量研究，请参阅 Correct Syntax for HTML Media Capture 和 The New Prompt for Media Capture in iOS9 。这是我的 测试台，有 20 多个代码组合。

原文由 octavn 发布，翻译遵循 CC BY-SA 4.0 许可协议