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

Question 1

我的问题：

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

TL; DR：

我只有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）
三星Note（Android 4.1.2）
iPhone 5（iOS 7.0.4）
Nexus 4（Android 4.4）

结果表：

W（ork）-启用 upload image dialog with camera
P（人工工作）-表示已启用 upload dialog(not image only) with camera
N（ot work）-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出现了问题。

我的问题是：

表中的行为是真的吗？Android 4.3的行为是否有错误？
我可以为浏览器信任它会始终添加摄像头以上传没有捕获属性的对话框吗？（请添加证明链接以获取答案）

谢谢。

PS Question非常特殊，但是在我的网站上，我必须为用户提供访问其图像和照相机的权限。另外，我认为我的桌子对任何人都可能有帮助，并且如果没有人回答，我也会寻找答案并将其张贴在这里。

Question 2

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

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

从这个

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

Question 3

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

<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多种代码组合。

Question 4

供其他人参考，这是截至今天（2020年2月）在Android 9上的Chrome上的行为：

  Must be selected from album
  <input type="file" accept="image/*">

  Must be captured from camera
  <input type="file" accept="image/*" capture="">

  Allowed user to choose either from album or camera
  <input type="file" accept="image/*;capture=camera">