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

kupeojn6 于 2022-11-03 发布在 Android

关注(0)|答案(4)|浏览(196)

我的问题：

然后用户点击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（安卓4.1.2）
三星S3（安卓4.3）
三星Galaxy Tab 2 7.0（安卓系统4.2.2）
三星Note（安卓系统4.1.2）
iPhone 5（苹果iOS 7.0.4）
Nexus 4（安卓系统4.4）

结果表：

工作-表示启用upload image dialog with camera
P（部分工作）-表示已启用upload dialog(not image only) with camera
N（不工作）-表示启用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的行为是一个错误？
1.我可以信任浏览器什么它总是会添加相机上传对话框没有捕获属性？（请添加证明链接的答案）

谢谢-谢谢
问题是特殊的，但在我的网站上，我必须为用户提供访问其图像和相机。我也认为我的表可以对任何人有帮助，我也会搜索答案，并将我的答案张贴在这里，如果没有人回答。

android

来源：https://stackoverflow.com/questions/21523544/html-file-input-control-with-capture-and-accept-attributes-works-wrong

4条答案

按热度按时间

x8diyxa71#

这是实际的答案。请将其发布在此处供下一位用户使用：
实际上，当前的实现似乎根本不依赖于capture属性，而只依赖于type和accept属性：浏览器会显示一个对话框，用户可以在其中选择文件的存放位置，而不考虑capture属性。（非拍摄）图像和视频（不是音频）。即使不使用accept属性，浏览器将允许您在“拍摄照片或视频”和“选择现有”之间进行选择（感谢@firt指出这一点）。
从this开始

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

赞(0）回复(0）举报 2022-11-03

6jygbczu2#

“正确的”代码和您应该使用的代码是第5个代码：
accept="video/*"
这就是为什么它在你的大多数设备上都能正常工作的原因。上面的代码是 * 正确的，完整的，足够 * 告诉iOS和Android：
1.您想要捕获图像（对于视频使用accept="video/*"，对于音频使用accept="audio/*"，完全跳过以允许任何内容）。
1.用户应该能够选择现有的一个或当场捕获
1.我可以相信浏览器什么它总是会添加相机上传对话框没有捕获属性？
"是的"
capture属性不用于在对话框中包含摄像头选项（<input type="file">就足够了），而是用于指示从网络摄像头直接捕获是 * 首选 *。
capture属性是一个布尔属性，如果指定，则表示首选直接从设备...捕获媒体。
capture受Android 3.0+支持，如果代码中存在capture，您将直接进入相机应用。
在iOS6-10中没有支持，它总是给予你至少2个选项：“拍照”+“照片库”。
capture属性已经在规范中得到了发展（这就是为什么在StackOverflow中会看到几个版本）：

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+个代码组合。

赞(0）回复(0）举报 2022-11-03

ohtdti5x3#

以下是截至今天（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">

赞(0）回复(0）举报 2022-11-03

yhived7q4#

在带Bootstrap 5的Angular 13中只放类似的东西;接受=".mpeg，.MPEG，./*”

赞(0）回复(0）举报 2022-11-03