具有捕获和接受属性的HTML文件input控件工作不正确?
我的问题:
然后用户单击input type=file
用户必须获取upload file + camera
对话框。 我正在使用这个html属性accept
和capture
。 但在一些现代设备上,这不会发生。 下面是代码示例和表格的作品与否。 代码示例在Mobile Safari
和Chrome
中进行了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也有问题。
我的问题是:
- 表中的行为是否属实? Android 4.3的行为是一个错误?
- 我可以信任的浏览器它将永远添加相机上传对话框没有捕获属性? (请添加certificate链接以供回答)
谢谢。
PS问题是特别的,但在我的网站上,我必须提供给用户访问其图像和相机。 此外,我认为我的桌子可以帮助任何人,也会寻找答案,如果没有人回答,我会在这里发表我的答案。
这是实际的答案。 只是在这里发布给下一个用户:
实际上,目前的实现似乎完全不依赖捕获属性,而只依赖于types和接受属性:浏览器显示一个对话框,用户可以在其中select文件的获取位置,
capture
属性没有考虑在内。 例如,iOS Safari依赖于图像和video(而不是audio)的接受属性(不捕获)。 即使你没有使用accept
属性,浏览器也会让你select“拍摄照片或video”和“select现有的”(感谢@ firt指出这一点)。
从这个
编辑2016年2月17日:此行为仍然在设备上处于活动状态。
“正确”的代码和你应该使用的是第五个:
<input type="file" accept="image/*">
这就是为什么它在大多数设备上正常工作。 上面的代码是正确的 , 完整的 , 足以告诉iOS和Android:
- 你想要捕捉一个图像 (对video使用
accept="video/*"
对于accept="audio/*"
,可以跳过任何内容)。 - 用户应该能够select现有的或当场捕获
- 我可以信任的浏览器它将永远添加相机上传对话框没有捕获属性?
是。
capture
属性不用于在对话框中包含相机选项( <input type="file">
就足够了),而是指示从networking摄像头直接捕捉是首选 。 从W3C推荐规范 :
capture属性是布尔属性,如果指定,则表示直接从设备捕获媒体…是首选。
capture
是由Android 3.0 +支持,这将带你直接进入相机的应用程序,如果capture
是存在的代码。
iOS6-10没有任何支持,他们总是会给你至less2个选项:“拍照”+“照片库”。
capture
属性已经在spec中演化了(这就是为什么你会在整个StackOverflow中看到几个版本):
- 2010年7月:
accept="image/*;capture=camera"
- 2011年4月:
capture="camera"
(String) - 2012年12月:
capture
(布尔, W3C候选推荐 )
PS:我已经做了大量有关HTML媒体捕获的研究,请参阅HTML媒体捕获的正确语法和iOS9 媒体捕获 的新提示 。 这是我的testing平台,有20多个代码组合。