具有捕获和接受属性的HTML文件输入控件是否有效？

Question

我的问题:

然后用户点击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存在问题.

我的问题是:

1. 表中的行为是否属实？Android 4.3的行为是一个bug？
2. 我可以信任浏览器它将始终添加摄像头上传对话框没有捕获属性吗？(请添加证据链接以获得答案)

谢谢.

PS问题很特别,但在我的网站上我必须提供用户访问其图像和相机的权限.另外我认为我的桌子对任何人都有帮助,我也会寻找答案,如果没有人回答,我会在这里发表答案.

Answer 1

这是实际的答案.只需将其发布给下一位用户:

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

从这个

2016年2月17日编辑: 此行为在设备上仍处于活动状态.

Answer 2

"正确"代码和您应该使用的代码是第5个:

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

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

1. 你想捕获一个图像(accept="video/*"用于视频和 accept="audio/*"音频,完全跳过以允许任何东西).
2. 用户应该能够选择现有的 OR或当场捕获它

2. 我可以信任浏览器它将始终添加摄像头上传对话框没有捕获属性吗？

是.

该capture属性不用于在对话框中包含摄像头选项(<input type="file">足够),但表示首选直接从网络摄像头捕获.从W3C推荐规范:

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

captureAndroid 3.0+支持,如果capture代码中存在,它将直接转到相机应用程序.

iOS6-10中没有任何支持者总是会给你至少2个选项:"拍照"+"照片库".

该capture属性已在规范中发展(这就是为什么你会在StackOverflow中看到几个版本):

1. 2010年7月: accept="image/*;capture=camera"
2. 2011年4月:( capture="camera"String)
3. 2012年12月:( capture布尔,W3C候选推荐,)

PS:我已经对HTML媒体捕获进行了大量研究,请参阅HTML媒体捕获的正确语法和iOS9中媒体捕获的新提示.这是我的测试平台,有20多种代码组合.

Answer 3

对于其他人来说，这是截至今天（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">