HTML 文件输入控件与捕获和接受属性工作错误？

我的问题是:

然后用户单击 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)
  • Samsung Galaxy Tab 27.0(安卓4.2.2)
  • 三星 Note (Android 4.1.2)
  • IPhone5(iOS7.0.4)
  • Nexus4(Android 4.4)

结果表:

  • W (work)-意味着启用了 upload image dialog with camera
  • P (部分工作)-意味着启用 upload dialog(not image only) with camera
  • N (不工作)-意味着启用 only camera
  • 意思是 Chrome
  • 代表 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. 我可以相信什么浏览器它总是添加相机上传 没有捕获属性的对话框? (请为答案添加证明链接)

谢谢。

附注: 问题是特殊的，但在我的网站，我必须提供给用户访问其图像和相机。我也认为我的表可以帮助任何人，也我会寻找答案，并会张贴我的答案在这里，如果没有人回答。

107137 次浏览
小开
最佳答案

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 capture attribute 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 accept attribute, the browser will let you choose between "Take Photo or Video" and "Choose Existing" (thanks to@firt for pointing this out).

From this

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

小开

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

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

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

  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 one OR capture it on the spot
  1. Can I trust for browsers what its will always add camera to upload dialog without capture attribute?

Yes.

The capture attribute 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:

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

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

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

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

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

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

小开

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

  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">
小开

in Angular 13 with Bootstrap5 only put something like that; accept=".mpeg, .MPEG, ./*"


提交答案