具有捕获和接受属性的HTML文件input控件工作不正确?

我的问题:

然后用户单击input type=file用户必须获取upload file + camera对话框。 我正在使用这个html属性acceptcapture 。 但在一些现代设备上,这不会发生。 下面是代码示例和表格的作品与否。 代码示例在Mobile SafariChrome中进行了testing。

TL; DR:

我只有input type file有5个代码示例:

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

testing设备:

  • 三星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(不工作) – 表示only camera启用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所有浏览器使用的upload file + camera对话框

只有<input type="file" accept="image/*"> 。 但在这种情况下没有capture属性,这让我担心,而且Android 4.3也有问题。

我的问题是:

  1. 表中的行为是否属实? Android 4.3的行为是一个错误?
  2. 我可以信任的浏览器它将永远添加相机上传对话框没有捕获属性? (请添加certificate链接以供回答)

谢谢。

PS问题是特别的,但在我的网站上,我必须提供给用户访问其图像和相机。 此外,我认为我的桌子可以帮助任何人,也会寻找答案,如果没有人回答,我会在这里发表我的答案。

这是实际的答案。 只是在这里发布给下一个用户:

实际上,目前的实现似乎完全不依赖捕获属性,而只依赖于types和接受属性:浏览器显示一个对话框,用户可以在其中select文件的获取位置, capture属性没有考虑在内。 例如,iOS Safari依赖于图像和video(而不是audio)的接受属性(不捕获)。 即使你没有使用accept属性,浏览器也会让你select“拍摄照片或video”和“select现有的”(感谢@ firt指出这一点)。

从这个

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

“正确”的代码和你应该使用的是第五个:

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

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

  1. 你想要捕捉一个图像 (对video使用accept="video/*"对于accept="audio/*" ,可以跳过任何内容)。
  2. 用户应该能够select现有的当场捕获
  1. 我可以信任的浏览器它将永远添加相机上传对话框没有捕获属性?

是。

capture属性不用于在对话框中包含相机选项( <input type="file">就足够了),而是指示从networking摄像头直接捕捉是首选 。 从W3C推荐规范 :

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

capture是由Android 3.0 +支持,这将带你直接进入相机的应用程序,如果capture是存在的代码。

iOS6-10没有任何支持,他们总是会给你至less2个选项:“拍照”+“照片库”。

capture属性已经在spec中演化了(这就是为什么你会在整个StackOverflow中看到几个版本):

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

PS:我已经做了大量有关HTML媒体捕获的研究,请参阅HTML媒体捕获的正确语法和iOS9 媒体捕获 的新提示 。 这是我的testing平台,有20多个代码组合。