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

Posted 2023-03-31

【中文标题】具有捕获和接受属性的 HTML 文件输入控件工作错误？

【英文标题】：HTML file input control with capture and accept attributes works wrong?

【发布时间】：2014-02-03 09:22:57

【问题描述】：

我的问题：

然后用户单击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(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  |  -  |  -  |  -  |  -  |  -  |
--------------------------------------------------------------------------------

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

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

我的问题是：

表中的行为是否正确？ Android 4.3 的行为是一个错误？ 我可以相信浏览器会添加摄像头上传的内容吗 没有捕获属性的对话框？ （答案请添加证明链接）

谢谢。

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

【问题讨论】：

这个问题与 javascript 的 API 无关。它是关于input type file 的浏览器行为。我不想读文件。我只是提供对我网站上图像/相机的访问权限的用户。

你看到了吗 - dev.opera.com/articles/view/media-capture-in-mobile-browsers

是的。 The capture attribute is a boolean attribute that, if specified, indicates that the capture of media directly from the device's environment using a media capture mechanism is preferred。但我想知道我的示例（其中一个）是否在没有capture 的情况下工作。这种行为是未来的钢铁吗？是否有任何关于此的草稿/文档。

W3C Candidate Recommendation 实际上是稳定的 API。接下来是W3C Recommendation，这意味着它永远不会改变。 Modernizr 没有检测捕获。手机刷机？不严重。

@YonnTrimoreau 我认为这意味着 W-->工作

【参考方案1】：

这是真正的答案。只需在此处发布以供下一个用户使用：

实际上，当前的实现似乎并不依赖于 完全捕获属性，但仅在类型和接受属性上： 浏览器显示一个对话框，用户可以在其中选择 该文件必须被占用，并且capture 属性未被占用 考虑到。例如，iOS Safari 依赖于接受 图像和视频（不是音频）的属性（不是捕获）。即使你 不要使用accept属性，浏览器会让你选择 在“拍照或录像”和“选择现有”之间（感谢@firt 指出这一点）。

来自this

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

【讨论】：

仅供参考，我相信如果您在 iOS 上使用 multiple="multiple" 属性，移动 safari 将绕过选择并直接进入多选。

mobile safari (MS) 是指移动 webkit，而不仅仅是 iOS 中的 Safari。

在运行 Chrome 的 Windows 平板电脑上怎么样？它是操作系统“功能”还是浏览器？

@Pinal，今天在运行 Chrome 的 Windows 平板电脑上尝试过，它一直转到画廊，而不是显示两个选项：拍照或使用画廊的图像。

@Pinal 这个答案不再正确。 iOS 10.3.1 已更改为符合规范，现在使用捕获将绕过从照片库中选择图像的选项。例如，请参阅***.com/questions/43396109/…

【参考方案2】：

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

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

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

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

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

是的。

capture 属性不用于在对话框中包含摄像头选项（<input type="file"> 就足够了），而是指示从网络摄像头直接捕获是首选。来自the W3C Recommendation spec：

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

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

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

capture 属性已在规范中演变（这就是为什么您会在 *** 中看到多个版本的原因）：

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

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

【讨论】：

错误答案。我不想捕捉图像。我想为用户提供相机访问和文件上传访问。正确的答案是“捕获属性对此毫无意义”。

引用的代码为您提供相机访问权限和用户文件上传访问权限。当您希望仅访问相机时使用capture（目前仅适用于Android）。

我已更新我的回复以包括 audio、video 和 everything 选项（只需删除 @987654337 @ 部分允许一切）

注意：启用浏览器权限，例如在 android/firefox 上：设置 > 应用程序管理器 > Firefox > 权限 > “启用相机”

【参考方案3】：

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

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

【讨论】：

不错的最新答案，accept="image/*;capture=camera";开发者页面上甚至都没有提到这一点 (developers.google.com/web/fundamentals/media/capturing-images)

【参考方案4】：

在带有 Bootstrap5 的 Angular 13 中只放这样的东西；接受=".mpeg, .MPEG, ./*"