Android 具有捕获和接受属性的 HTML 文件输入控件是否工作错误？

HTML file input control with capture and accept attributes works wrong?

提问by Pinal

My problem:

我的问题：

Then user click the input type=fileuser must get the upload file + cameradialog. I'm using for this html attributes acceptand capture. But on some modern devices this doesn't happen. Below there are the code examples and the table which of its works or not. Code examples are tested in Mobile Safariand Chrome.

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

TL;DR:

特尔；博士：

I have 5 code examples with just input type file:

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

1.(jsfiddle)

1.( jsfiddle)

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

2. (jsfiddle)

2. ( jsfiddle)

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

3. (jsfiddle)

3. ( jsfiddle)

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

4. (jsfiddle)

4. ( jsfiddle)

<input type="file" capture>

5. (jsfiddle)

5. ( jsfiddle)

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

Test devices:

测试设备：

• Samsung S3 (Android 4.1.2)
• Samsung S3 (Android 4.3)
• Samsung Galaxy Tab 2 7.0 (Android 4.2.2)
• Samsung Note (Android 4.1.2)
• iPhone 5 (iOS 7.0.4)
• Nexus 4 (Android 4.4)

• 三星 S3（安卓 4.1.2）
• 三星 S3（安卓 4.3）
• 三星 Galaxy Tab 2 7.0 (Android 4.2.2)
• 三星 Note (Android 4.1.2)
• iPhone 5 (iOS 7.0.4)
• Nexus 4（安卓 4.4）

Table of results:

结果表：

• W(ork) - means enabled upload image dialog with camera
• P(artially works) - means enabled upload dialog(not image only) with camera
• N(ot work) - means only cameraenabled
• Ch - means Chrome
• MS - means Mobile Safari

• W(ork) - 表示启用 upload image dialog with camera
• P(artially works) - 表示启用 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  |  -  |  -  |  -  |  -  |  -  |
--------------------------------------------------------------------------------

As you can see I can get only upload file + cameradialog for all browsers using

如您所见，我只能upload file + camera使用所有浏览器获得对话框

<input type="file" accept="image/*">only. But there is no captureattribute in this case, and this worrying me and there is a problem with Android 4.3.

<input type="file" accept="image/*">只要。但是capture在这种情况下没有属性，这让我很担心，Android 4.3 存在问题。

My questions are:

我的问题是：

1. Are behaviors in table true? Android 4.3 behavior is a bug?
2. Can I trust for browsers what its will always add camera to upload dialog without capture attribute? (Please add proof links for answer)

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

Thanks.

谢谢。

P.S. Question is special, but on my site I must provide for users access to its images and camera. Also I think my table can be helpful for anybody and also I will searching for answer to and will post my answer here if nobody answer.

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

采纳答案by Pinal

This is the actual answer. Just post it here for next users:

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

Actually, it seems that current implementations don't rely on the capture attribute at all, but only on the type and accept attributes: the browser displays a dialog box in which the user can choose where the file has to be taken, and the captureattribute is not taken into consideration. For example, iOS Safari relies on the accept attribute (not capture) for images and videos (not audio). Even if you don't use the acceptattribute, the browser will let you choose between "Take Photo or Video" and "Choose Existing" (thanks to@firt for pointing this out).

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

From this

从这个

EDITED 17 Feb 2016:This behavior is still active on devices.

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

回答by Octavian Naicu

The "correct" code and the one you should be using is the 5th one:

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

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

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

Which is why it's working correctly on most of your devices. The above code is correct, completeand enoughto tell both iOS and Android that:

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

1. you want to capture an image(use accept="video/*"for video and accept="audio/*"for audio, skip altogether to allow anything).
2. the user should be able to select an existing oneOR capture it on the spot

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

2. Can I trust for browsers what its will always add camera to upload dialog without capture attribute?

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

Yes.

是的。

The captureattribute is NOT used to include the camera option in the dialog (<input type="file">is enough for that) but to indicate that direct capture from the webcam is preferred. From the W3C Recommendation spec:

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

The capture attribute is a boolean attribute that, if specified, indicates that the capture of media directly from the device...is preferred.

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

captureis supported by Android 3.0+ which will take you straight to the camera app if captureis present in the code.

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

There's no support in iOS6-10 who will always give you at least 2 options: "Take Photo" + "Photo Library".

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

The captureattribute has evolved in the spec (which is why you'll see several versions throughout StackOverflow):

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

1. July 2010: accept="image/*;capture=camera"
2. Apr 2011 : capture="camera"(String)
3. Dec 2012: capture(Boolean, W3C Candidate Recommendation,)

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

PS: I've done a ton of research on HTML Media Capture, see Correct Syntax for HTML Media Captureand The New Prompt for Media Capture in iOS9. Here's my test benchwith 20+ code combinations.

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

回答by Beeno Tung

For others to reference this is the behavior on Chrome on Android 9 as of today (Feb 2020):

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