然后,用户点击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/*">
测试设备:
结果表:
upload image dialog with camera
upload dialog(not image only) with camera
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存在问题。
感谢。
P.S。问题很特殊,但在我的网站上,我必须提供用户访问其图像和相机的权限。另外我认为我的桌子对任何人都有帮助,我也会搜索答案,如果没有人回答,我会在这里发布答案。
答案 0 :(得分:34)
这是实际的答案。只需将其发布给下一位用户:
实际上,似乎当前的实现并不依赖于 捕获属性,但仅限于类型和接受属性: 浏览器显示一个对话框,用户可以在其中选择 必须采取该文件,并且不采用
capture
属性 考虑到。例如,iOS Safari依赖于accept 图像和视频(不是音频)的属性(不捕获)。即使你 如果不使用accept
属性,浏览器会让您选择 之间&#34;拍摄照片或视频&#34;和&#34;选择现有&#34; (感谢@ firt 指出这一点)。
来自this
2016年2月17日编辑: 此行为在设备上仍然有效。
答案 1 :(得分:19)
“正确”代码和您应该使用的代码是第5个:
File.exists?
这就是为什么它在大多数设备上都能正常工作的原因。以上代码正确,完成和足够告诉iOS和Android:
<input type="file" accept="image/*">
获取视频,使用accept="video/*"
获取音频,完全跳过以允许任何内容)。
- 我是否可以信任浏览器在没有捕获属性的情况下总会添加相机上传对话框?
醇>
是的。
accept="audio/*"
属性不用于在对话框中包含相机选项(capture
就足够了),但表示从网络摄像头直接捕获首选 。来自the W3C Recommendation spec:
Android 3.0+支持capture属性是一个布尔属性,如果指定,则表示直接从设备捕获媒体...是首选。
<input type="file">
,如果代码中出现capture
,则会直接转到相机应用。
在iOS6-10中没有支持者总会给你至少2个选项:“拍照”+“照片库”。
capture
属性已在规范中发展(这就是为什么你会在StackOverflow中看到几个版本):
capture
accept="image/*;capture=camera"
(字符串)capture="camera"
(布尔, W3C候选推荐,)PS:我已经对HTML媒体捕获进行了大量研究,请参阅Correct Syntax for HTML Media Capture和The New Prompt for Media Capture in iOS9。这是我的test bench,代码组合超过20个。
答案 2 :(得分:6)
自今天起(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">